Improve accessibility, style, and code-splitting

.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+indent_style = space
+indent_size = 2
+
+[*.{md,mdx}]
+trim_trailing_whitespace = false

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "tabWidth": 2,
+  "endOfLine": "lf"
+}

src/application/App.tsx

@@ -1,7 +1,20 @@
+import { Suspense, lazy } from "react";
 import { Routes, Route, Navigate } from "react-router-dom";
-import AgentsPage from "@/application/pages/AgentsPage";
 import ChatPage from "@/application/pages/ChatPage";
-import RagPage from "@/application/pages/RagPage";
+
+// Lazy-load secondary routes for code-splitting / smaller initial bundle.
+const AgentsPage = lazy(() => import("@/application/pages/AgentsPage"));
+const RagPage = lazy(() => import("@/application/pages/RagPage"));
+
+function PageFallback() {
+  return (
+    <div className="flex-1 flex items-center justify-center" role="status" aria-live="polite">
+      <p className="text-on-surface-variant text-sm">Loading…</p>
+    </div>
+  );
+}
+
+export { PageFallback };
 
 function App() {
   return (
@@ -14,4 +27,10 @@ function App() {
   );
 }
 
-export default App;
+export default function AppRoot() {
+  return (
+    <Suspense fallback={<PageFallback />}>
+      <App />
+    </Suspense>
+  );
+}

src/application/components/agent/AgentCard.tsx

@@ -40,10 +40,7 @@ function getAgentIcon(name: string): string {
   return AGENT_ICONS[firstLetter] ?? "smart_toy";
 }
 
-export default function AgentCard({
-  agent,
-  onConfigure,
-}: Readonly<AgentCardProps>) {
+export default function AgentCard({ agent, onConfigure }: Readonly<AgentCardProps>) {
   return (
     <div className="bg-surface-container-lowest rounded-xl p-8 ambient-shadow hover:translate-y-[-2px] transition-transform duration-300">
       {/* Header: icon + status */}
@@ -57,9 +54,7 @@ export default function AgentCard({
       </div>
 
       {/* Name */}
-      <h3 className="font-headline text-2xl font-bold text-on-surface mb-2">
-        {agent.name}
-      </h3>
+      <h3 className="font-headline text-2xl font-bold text-on-surface mb-2">{agent.name}</h3>
 
       {/* Model */}
       <p className="text-sm text-on-surface-variant mb-8">{agent.model}</p>
@@ -70,10 +65,7 @@ export default function AgentCard({
         onClick={() => onConfigure(agent.name)}
         className="flex items-center gap-2 text-secondary-brand font-headline text-xs font-bold uppercase tracking-widest hover:opacity-80 transition-opacity"
       >
-        Configure{" "}
-        <span className="material-symbols-outlined text-base">
-          arrow_forward
-        </span>
+        Configure <span className="material-symbols-outlined text-base">arrow_forward</span>
       </button>
     </div>
   );