From 05c30c70a92cf76a5c10156dbdacf7529c19f5b4 Mon Sep 17 00:00:00 2001
From: Kaiohz <yohan.goncalves@cosigma.io>
Date: Sat, 11 Jul 2026 07:21:30 +0200
Subject: [PATCH 1/3] Improve accessibility, style, and code-splitting

- Add skip link, ARIA roles/labels, and keyboard navigation
- Lazy-load secondary routes with Suspense fallback
- Extract shared SegmentedToggle component
- Enhance focus rings, status badges, and breadcrumb semantics
- Use proper ellipsis character and hide decorative icons
---
 src/application/App.tsx                       |  27 +-
 .../components/agent/AgentConfigForm.tsx      | 580 +++++++++---------
 .../components/agent/AgentConfigViewer.tsx    | 417 +++++++------
 .../components/agent/CreateAgentDialog.tsx    | 153 +++--
 .../components/agent/HITLEditor.tsx           |   9 +-
 .../components/agent/KeyValueEditor.tsx       |   9 +-
 .../components/agent/McpServerEditor.tsx      |   9 +-
 .../components/agent/StringListEditor.tsx     |  11 +-
 .../components/agent/SubAgentEditor.tsx       |  11 +-
 .../components/chat/ChatMessage.tsx           |  44 +-
 .../components/chat/MessageList.tsx           |  41 +-
 .../components/layout/MainLayout.tsx          |  24 +-
 .../components/layout/ThreadSidebar.tsx       | 201 +++---
 src/application/components/layout/TopNav.tsx  |  90 ++-
 .../components/rag/BreadcrumbBar.tsx          |  67 +-
 .../components/rag/FileContentPanel.tsx       | 164 ++---
 .../components/rag/IndexActionMenu.tsx        | 151 ++++-
 .../components/rag/PipelineToggle.tsx         |  52 +-
 src/application/components/rag/RagTabBar.tsx  |  38 +-
 .../components/rag/WorkspaceSelector.tsx      | 110 +++-
 .../components/shared/SegmentedToggle.tsx     |  83 +++
 .../components/shared/StatusBadge.tsx         |  65 +-
 src/application/components/ui/accordion.tsx   |   8 +-
 src/application/components/ui/button.tsx      |  24 +-
 src/application/components/ui/dialog.tsx      |  12 +-
 src/application/components/ui/input.tsx       |   2 +-
 src/application/components/ui/select.tsx      |  43 +-
 src/application/components/ui/textarea.tsx    |   2 +-
 .../agent/AgentConfigViewer.test.tsx          |   8 +-
 .../agent/CreateAgentDialog.test.tsx          |   5 +-
 .../unit/components/chat/ChatMessage.test.tsx |   2 +-
 .../components/layout/ThreadSidebar.test.tsx  |   4 +-
 .../components/rag/IndexActionMenu.test.tsx   |  12 +-
 .../components/shared/StatusBadge.test.tsx    |  10 +-
 34 files changed, 1561 insertions(+), 927 deletions(-)
 create mode 100644 src/application/components/shared/SegmentedToggle.tsx

diff --git a/src/application/App.tsx b/src/application/App.tsx
index 12671ae..4801afa 100644
--- a/src/application/App.tsx
+++ b/src/application/App.tsx
@@ -1,7 +1,22 @@
+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>
+  );
+}
 
 function App() {
   return (
@@ -14,4 +29,10 @@ function App() {
   );
 }
 
-export default App;
+export default function AppRoot() {
+  return (
+    <Suspense fallback={<PageFallback />}>
+      <App />
+    </Suspense>
+  );
+}
\ No newline at end of file
diff --git a/src/application/components/agent/AgentConfigForm.tsx b/src/application/components/agent/AgentConfigForm.tsx
index bb24f65..8d77203 100644
--- a/src/application/components/agent/AgentConfigForm.tsx
+++ b/src/application/components/agent/AgentConfigForm.tsx
@@ -26,7 +26,6 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/application/components/ui/select";
-import { Separator } from "@/application/components/ui/separator";
 import StringListEditor from "./StringListEditor";
 import McpServerEditor from "./McpServerEditor";
 import SubAgentEditor from "./SubAgentEditor";
@@ -35,17 +34,34 @@ import ResponseFormatEditor from "./ResponseFormatEditor";
 
 // ─── Constants ──────────────────────────────────────────────────────────────
 
-const ACCORDION_SECTIONS = [
-  "general",
-  "system-prompt",
-  "tools-middleware",
-  "backend",
-  "hitl",
-  "memory-skills",
-  "mcp-servers",
-  "subagents",
-  "response-format",
-] as const;
+type SectionValue =
+  | "general"
+  | "system-prompt"
+  | "tools-middleware"
+  | "backend"
+  | "hitl"
+  | "memory-skills"
+  | "mcp-servers"
+  | "subagents"
+  | "response-format";
+
+// Only essential sections are open by default, others can be revealed on demand.
+const DEFAULT_OPEN_SECTIONS: SectionValue[] = ["general", "system-prompt"];
+
+const SECTION_META: Record<
+  SectionValue,
+  { label: string; icon: string }
+> = {
+  general: { label: "General", icon: "tune" },
+  "system-prompt": { label: "System Prompt", icon: "description" },
+  "tools-middleware": { label: "Tools & Middleware", icon: "build" },
+  backend: { label: "Backend", icon: "storage" },
+  hitl: { label: "HITL", icon: "verified_user" },
+  "memory-skills": { label: "Memory & Skills", icon: "psychology" },
+  "mcp-servers": { label: "MCP Servers", icon: "hub" },
+  subagents: { label: "Subagents", icon: "group" },
+  "response-format": { label: "Response Format", icon: "data_object" },
+};
 
 const MIDDLEWARE_OPTIONS: { label: string; value: MiddlewareType }[] = [
   { value: MiddlewareType.TODO_LIST, label: "todo_list" },
@@ -121,15 +137,18 @@ function cn(...classes: (string | false | undefined)[]): string {
   return classes.filter(Boolean).join(" ");
 }
 
-function buildAccordionTriggerClass(active?: boolean): string {
+function buildAccordionTriggerClass(): string {
   return cn(
-    "text-xs font-bold font-headline uppercase tracking-widest hover:no-underline",
-    active
-      ? "text-secondary-brand"
-      : "text-on-surface-variant",
+    "text-xs font-bold font-headline uppercase tracking-widest",
+    "text-on-surface hover:text-secondary-brand",
+    "data-[state=open]:text-secondary-brand",
   );
 }
 
+function showRootDir(type: BackendType): boolean {
+  return type === BackendType.FILESYSTEM || type === BackendType.COMPOSITE;
+}
+
 // ─── Props ──────────────────────────────────────────────────────────────────
 
 interface AgentConfigFormProps {
@@ -142,6 +161,8 @@ interface AgentConfigFormProps {
 
 // ─── Component ────────────────────────────────────────────────────────────
 
+const FORM_ID = "agent-config-form";
+
 export default function AgentConfigForm({
   mode,
   initialData,
@@ -199,267 +220,251 @@ export default function AgentConfigForm({
     }
   }
 
-  function renderSubmitLabel(): string {
-    if (isPending) return "Saving...";
-    return mode === "create" ? "Create" : "Update";
-  }
-
   return (
     <form
+      id={FORM_ID}
       onSubmit={handleSubmit(handleFormSubmit)}
-      className="flex flex-col max-h-[70vh]"
+      // The parent dialog handles the footer; this form is purely the scrollable body.
+      className="flex flex-col"
     >
-      <div className="flex-1 overflow-y-auto pr-4">
-        <div className="space-y-2">
-          <Accordion type="multiple" defaultValue={[...ACCORDION_SECTIONS]}>
-            {/* General */}
-            <AccordionItem value="general">
-              <AccordionTrigger className={buildAccordionTriggerClass()}>
-                General
-              </AccordionTrigger>
-              <AccordionContent className="space-y-4 pt-2">
-                <FormField
-                  id="agent-name"
-                  label="Agent Name"
-                  error={errors.name?.message}
-                >
-                  <Input
-                    id="agent-name"
-                    {...register("name")}
-                    disabled={mode === "edit"}
-                    placeholder="my-agent"
-                    aria-invalid={!!errors.name}
-                  />
-                </FormField>
-                <FormField
-                  id="model"
-                  label="Model"
-                  error={errors.model?.message}
-                >
-                  <Input
-                    id="model"
-                    {...register("model")}
-                    placeholder="openai:anthropic/claude-haiku-4.5:nitro"
-                    aria-invalid={!!errors.model}
-                  />
-                </FormField>
-                <div className="flex items-center gap-3">
-                  <Label htmlFor="debug" className="text-on-surface">
-                    Debug
-                  </Label>
-                  <Switch
-                    id="debug"
-                    checked={watch("debug")}
-                    onCheckedChange={(v) => setValue("debug", v)}
-                  />
-                </div>
-              </AccordionContent>
-            </AccordionItem>
-
-            {/* System Prompt */}
-            <AccordionItem value="system-prompt">
-              <AccordionTrigger className={buildAccordionTriggerClass()}>
-                System Prompt
-              </AccordionTrigger>
-              <AccordionContent className="space-y-4 pt-2">
-                <FormField id="system-prompt" label="System Prompt">
-                  <Textarea
-                    id="system-prompt"
-                    {...register("system_prompt")}
-                    placeholder="You are a helpful assistant..."
-                    rows={6}
-                  />
-                </FormField>
-                <FormField
-                  id="system-prompt-file"
-                  label="System Prompt File"
-                >
-                  <Input
-                    id="system-prompt-file"
-                    {...register("system_prompt_file")}
-                    placeholder="/prompts/system.txt (optional)"
-                  />
-                </FormField>
-              </AccordionContent>
-            </AccordionItem>
-
-            {/* Tools & Middleware */}
-            <AccordionItem value="tools-middleware">
-              <AccordionTrigger className={buildAccordionTriggerClass()}>
-                Tools &amp; Middleware
-              </AccordionTrigger>
-              <AccordionContent className="space-y-4 pt-2">
-                <StringListEditor
-                  label="Tools"
-                  value={watch("tools")}
-                  onChange={(tools) => setValue("tools", tools)}
-                  placeholder="Add tool..."
-                />
-                <div>
-                  <Label className="text-on-surface">Middleware</Label>
-                  <div className="flex flex-wrap gap-2 mt-2">
-                    {MIDDLEWARE_OPTIONS.map((opt) => {
-                      const isActive = middlewareValues.includes(opt.value);
-                      return (
-                        <button
-                          key={opt.value}
-                          type="button"
-                          onClick={() =>
-                            toggleMiddleware(opt.value, !isActive)
-                          }
-                          aria-pressed={isActive}
-                          className={cn(
-                            "px-3 py-1.5 rounded-full text-xs font-bold font-headline uppercase tracking-widest border transition-colors",
-                            isActive
-                              ? "bg-secondary-brand text-white border-secondary-brand"
-                              : "bg-surface-container-low text-on-surface-variant border-outline-variant/30 hover:bg-surface-container-high",
-                          )}
-                        >
-                          {opt.label}
-                        </button>
-                      );
-                    })}
-                  </div>
-                </div>
-              </AccordionContent>
-            </AccordionItem>
-
-            {/* Backend */}
-            <AccordionItem value="backend">
-              <AccordionTrigger className={buildAccordionTriggerClass()}>
-                Backend
-              </AccordionTrigger>
-              <AccordionContent className="space-y-4 pt-2">
-                <div>
-                  <Label className="text-on-surface">Type</Label>
-                  <Select
-                    value={backendType}
-                    onValueChange={(v) =>
-                      setValue("backend.type", v as BackendType)
-                    }
-                  >
-                    <SelectTrigger className="mt-1">
-                      <SelectValue />
-                    </SelectTrigger>
-                    <SelectContent>
-                      {BACKEND_OPTIONS.map((opt) => (
-                        <SelectItem key={opt.value} value={opt.value}>
-                          {opt.label}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </div>
-                {showRootDir(backendType) && (
-                  <FormField
-                    id="backend-root-dir"
-                    label="Root Directory"
-                  >
-                    <Input
-                      id="backend-root-dir"
-                      {...register("backend.root_dir")}
-                      placeholder="/data/agents"
-                    />
-                  </FormField>
-                )}
-              </AccordionContent>
-            </AccordionItem>
-
-            {/* HITL */}
-            <AccordionItem value="hitl">
-              <AccordionTrigger className={buildAccordionTriggerClass()}>
-                HITL
-              </AccordionTrigger>
-              <AccordionContent className="space-y-4 pt-2">
-                <HITLEditor
-                  value={watch("hitl.rules")}
-                  onChange={(rules) => setValue("hitl.rules", rules)}
-                />
-              </AccordionContent>
-            </AccordionItem>
-
-            {/* Memory & Skills */}
-            <AccordionItem value="memory-skills">
-              <AccordionTrigger className={buildAccordionTriggerClass()}>
-                Memory &amp; Skills
-              </AccordionTrigger>
-              <AccordionContent className="space-y-4 pt-2">
-                <StringListEditor
-                  label="Memory"
-                  value={watch("memory")}
-                  onChange={(memory) => setValue("memory", memory)}
-                  placeholder="Add memory path..."
+      <Accordion
+        type="multiple"
+        defaultValue={DEFAULT_OPEN_SECTIONS as never}
+        className="space-y-1"
+      >
+        {/* General */}
+        <AccordionItem value="general">
+          <SectionTrigger value="general" />
+          <AccordionContent className="space-y-4">
+            <FormField
+              id="agent-name"
+              label="Agent Name"
+              error={errors.name?.message}
+            >
+              <Input
+                id="agent-name"
+                {...register("name")}
+                disabled={mode === "edit"}
+                placeholder="my-agent…"
+                autoComplete="off"
+                aria-invalid={!!errors.name}
+              />
+            </FormField>
+            <FormField
+              id="model"
+              label="Model"
+              error={errors.model?.message}
+            >
+              <Input
+                id="model"
+                {...register("model")}
+                placeholder="openai:anthropic/claude-haiku-4.5:nitro"
+                autoComplete="off"
+                spellCheck={false}
+                aria-invalid={!!errors.model}
+              />
+            </FormField>
+            <div className="flex items-center gap-3">
+              <Label htmlFor="debug" className="text-on-surface text-sm">
+                Debug
+              </Label>
+              <Switch
+                id="debug"
+                checked={watch("debug")}
+                onCheckedChange={(v) => setValue("debug", v)}
+              />
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+
+        {/* System Prompt */}
+        <AccordionItem value="system-prompt">
+          <SectionTrigger value="system-prompt" />
+          <AccordionContent className="space-y-4">
+            <FormField id="system-prompt" label="System Prompt">
+              <Textarea
+                id="system-prompt"
+                {...register("system_prompt")}
+                placeholder="You are a helpful assistant…"
+                rows={6}
+                className="font-mono text-xs"
+              />
+            </FormField>
+            <FormField id="system-prompt-file" label="System Prompt File">
+              <Input
+                id="system-prompt-file"
+                {...register("system_prompt_file")}
+                placeholder="/prompts/system.txt (optional)…"
+                autoComplete="off"
+                spellCheck={false}
+              />
+            </FormField>
+          </AccordionContent>
+        </AccordionItem>
+
+        {/* Tools & Middleware */}
+        <AccordionItem value="tools-middleware">
+          <SectionTrigger value="tools-middleware" />
+          <AccordionContent className="space-y-4">
+            <StringListEditor
+              label="Tools"
+              value={watch("tools")}
+              onChange={(tools) => setValue("tools", tools)}
+              placeholder="Add tool…"
+            />
+            <div>
+              <Label className="text-on-surface text-sm">Middleware</Label>
+              <div className="flex flex-wrap gap-2 mt-2">
+                {MIDDLEWARE_OPTIONS.map((opt) => {
+                  const isActive = middlewareValues.includes(opt.value);
+                  return (
+                    <button
+                      key={opt.value}
+                      type="button"
+                      onClick={() =>
+                        toggleMiddleware(opt.value, !isActive)
+                      }
+                      aria-pressed={isActive}
+                      className={cn(
+                        "px-3 py-1.5 rounded-full text-xs font-bold font-headline uppercase tracking-widest border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-brand focus-visible:ring-inset",
+                        isActive
+                          ? "bg-secondary-brand text-white border-secondary-brand"
+                          : "bg-surface-container-low text-on-surface-variant border-outline-variant/30 hover:bg-surface-container-high",
+                      )}
+                    >
+                      {opt.label}
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          </AccordionContent>
+        </AccordionItem>
+
+        {/* Backend */}
+        <AccordionItem value="backend">
+          <SectionTrigger value="backend" />
+          <AccordionContent className="space-y-4">
+            <div>
+              <Label className="text-on-surface text-sm">Type</Label>
+              <Select
+                value={backendType}
+                onValueChange={(v) =>
+                  setValue("backend.type", v as BackendType)
+                }
+              >
+                <SelectTrigger className="mt-1.5">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  {BACKEND_OPTIONS.map((opt) => (
+                    <SelectItem key={opt.value} value={opt.value}>
+                      {opt.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            {showRootDir(backendType) && (
+              <FormField id="backend-root-dir" label="Root Directory">
+                <Input
+                  id="backend-root-dir"
+                  {...register("backend.root_dir")}
+                  placeholder="/data/agents"
+                  autoComplete="off"
+                  spellCheck={false}
                 />
-                <StringListEditor
-                  label="Skills"
-                  value={watch("skills")}
-                  onChange={(skills) => setValue("skills", skills)}
-                  placeholder="Add skill..."
-                />
-              </AccordionContent>
-            </AccordionItem>
-
-            {/* MCP Servers */}
-            <AccordionItem value="mcp-servers">
-              <AccordionTrigger className={buildAccordionTriggerClass()}>
-                MCP Servers
-              </AccordionTrigger>
-              <AccordionContent className="space-y-4 pt-2">
-                {mcpServersArray.fields.map((field, index) => (
-                  <McpServerEditor
-                    key={field.id}
-                    value={field as unknown as McpServerConfig}
-                    onChange={(v) => mcpServersArray.update(index, v)}
-                    onRemove={() => mcpServersArray.remove(index)}
-                  />
-                ))}
-                <AddButton onClick={addMcpServer} label="Add MCP Server" />
-              </AccordionContent>
-            </AccordionItem>
-
-            {/* Subagents */}
-            <AccordionItem value="subagents">
-              <AccordionTrigger className={buildAccordionTriggerClass()}>
-                Subagents
-              </AccordionTrigger>
-              <AccordionContent className="space-y-4 pt-2">
-                {subagentsArray.fields.map((field, index) => (
-                  <SubAgentEditor
-                    key={field.id}
-                    index={index}
-                    value={field as unknown as SubAgentConfig}
-                    onChange={(v) => subagentsArray.update(index, v)}
-                    onRemove={() => subagentsArray.remove(index)}
-                  />
-                ))}
-                <AddButton onClick={addSubagent} label="Add Subagent" />
-              </AccordionContent>
-            </AccordionItem>
-
-            {/* Response Format */}
-            <AccordionItem value="response-format">
-              <AccordionTrigger className={buildAccordionTriggerClass()}>
-                Response Format
-              </AccordionTrigger>
-              <AccordionContent className="space-y-4 pt-2">
-                <ResponseFormatEditor
-                  value={watch("response_format")}
-                  onChange={(v) => setValue("response_format", v)}
-                />
-              </AccordionContent>
-            </AccordionItem>
-          </Accordion>
-        </div>
-      </div>
-
-      <Separator className="my-4" />
-
-      <div className="flex justify-end gap-3">
+              </FormField>
+            )}
+          </AccordionContent>
+        </AccordionItem>
+
+        {/* HITL */}
+        <AccordionItem value="hitl">
+          <SectionTrigger value="hitl" />
+          <AccordionContent className="space-y-4">
+            <HITLEditor
+              value={watch("hitl.rules")}
+              onChange={(rules) => setValue("hitl.rules", rules)}
+            />
+          </AccordionContent>
+        </AccordionItem>
+
+        {/* Memory & Skills */}
+        <AccordionItem value="memory-skills">
+          <SectionTrigger value="memory-skills" />
+          <AccordionContent className="space-y-4">
+            <StringListEditor
+              label="Memory"
+              value={watch("memory")}
+              onChange={(memory) => setValue("memory", memory)}
+              placeholder="Add memory path…"
+            />
+            <StringListEditor
+              label="Skills"
+              value={watch("skills")}
+              onChange={(skills) => setValue("skills", skills)}
+              placeholder="Add skill…"
+            />
+          </AccordionContent>
+        </AccordionItem>
+
+        {/* MCP Servers */}
+        <AccordionItem value="mcp-servers">
+          <SectionTrigger value="mcp-servers" />
+          <AccordionContent className="space-y-4">
+            {mcpServersArray.fields.map((field, index) => (
+              <McpServerEditor
+                key={field.id}
+                value={field as unknown as McpServerConfig}
+                onChange={(v) => mcpServersArray.update(index, v)}
+                onRemove={() => mcpServersArray.remove(index)}
+              />
+            ))}
+            <AddButton onClick={addMcpServer} label="Add MCP Server" />
+          </AccordionContent>
+        </AccordionItem>
+
+        {/* Subagents */}
+        <AccordionItem value="subagents">
+          <SectionTrigger value="subagents" />
+          <AccordionContent className="space-y-4">
+            {subagentsArray.fields.map((field, index) => (
+              <SubAgentEditor
+                key={field.id}
+                index={index}
+                value={field as unknown as SubAgentConfig}
+                onChange={(v) => subagentsArray.update(index, v)}
+                onRemove={() => subagentsArray.remove(index)}
+              />
+            ))}
+            <AddButton onClick={addSubagent} label="Add Subagent" />
+          </AccordionContent>
+        </AccordionItem>
+
+        {/* Response Format */}
+        <AccordionItem value="response-format">
+          <SectionTrigger value="response-format" />
+          <AccordionContent className="space-y-4">
+            <ResponseFormatEditor
+              value={watch("response_format")}
+              onChange={(v) => setValue("response_format", v)}
+            />
+          </AccordionContent>
+        </AccordionItem>
+      </Accordion>
+
+      {/* Hidden section separator that adds breathing room below last fold */}
+      <div className="h-2" aria-hidden="true" />
+
+      {/* Local Cancel + Submit (hidden on mobile where dialog footer is used)
+          Kept for embedded usage in AgentConfigViewer where no dialog footer exists. */}
+      <div className="hidden lg:flex items-center justify-end gap-3 mt-6 pt-4 border-t border-outline-variant/30">
         <Button type="button" variant="outline" onClick={onCancel}>
           Cancel
         </Button>
         <Button type="submit" disabled={isPending}>
-          {renderSubmitLabel()}
+          {isPending ? "Saving…" : mode === "create" ? "Create" : "Update"}
         </Button>
       </div>
     </form>
@@ -468,8 +473,21 @@ export default function AgentConfigForm({
 
 // ─── Small helpers ─────────────────────────────────────────────────────────
 
-function showRootDir(type: BackendType): boolean {
-  return type === BackendType.FILESYSTEM || type === BackendType.COMPOSITE;
+function SectionTrigger({ value }: Readonly<{ value: SectionValue }>) {
+  const meta = SECTION_META[value];
+  return (
+    <AccordionTrigger className={buildAccordionTriggerClass()}>
+      <span className="flex items-center gap-2">
+        <span
+          className="material-symbols-outlined text-sm text-secondary-brand"
+          aria-hidden="true"
+        >
+          {meta.icon}
+        </span>
+        {meta.label}
+      </span>
+    </AccordionTrigger>
+  );
 }
 
 interface FormFieldProps {
@@ -483,14 +501,21 @@ function FormField({ id, label, error, children }: Readonly<FormFieldProps>) {
   const errorId = error ? `${id}-error` : undefined;
   return (
     <div>
-      <Label htmlFor={id} className="text-on-surface">
+      <Label
+        htmlFor={id}
+        className="text-[10px] font-bold font-headline uppercase tracking-widest text-on-surface-variant mb-2 block"
+      >
         {label}
       </Label>
       <div aria-invalid={!!error} aria-describedby={errorId}>
         {children}
       </div>
       {error && (
-        <p id={errorId} role="alert" className="text-destructive text-xs mt-1">
+        <p
+          id={errorId}
+          role="alert"
+          className="text-destructive text-xs mt-1.5"
+        >
           {error}
         </p>
       )}
@@ -512,8 +537,13 @@ function AddButton({ onClick, label }: Readonly<AddButtonProps>) {
       onClick={onClick}
       className="w-full"
     >
-      <span className="material-symbols-outlined text-sm mr-1">add</span>
+      <span
+        className="material-symbols-outlined text-sm mr-1"
+        aria-hidden="true"
+      >
+        add
+      </span>
       {label}
     </Button>
   );
-}
+}
\ No newline at end of file
diff --git a/src/application/components/agent/AgentConfigViewer.tsx b/src/application/components/agent/AgentConfigViewer.tsx
index a26bd3e..0842139 100644
--- a/src/application/components/agent/AgentConfigViewer.tsx
+++ b/src/application/components/agent/AgentConfigViewer.tsx
@@ -17,7 +17,6 @@ import {
 } from "@/application/components/ui/dialog";
 import { Button } from "@/application/components/ui/button";
 import { ScrollArea } from "@/application/components/ui/scroll-area";
-import { Separator } from "@/application/components/ui/separator";
 import AgentConfigForm from "./AgentConfigForm";
 
 interface AgentConfigViewerProps {
@@ -31,11 +30,7 @@ export default function AgentConfigViewer({
   open,
   onOpenChange,
 }: Readonly<AgentConfigViewerProps>) {
-  const {
-    data: config,
-    isLoading,
-    error,
-  } = useAgentConfig(open ? agentName : null);
+  const { data: config, isLoading, error } = useAgentConfig(open ? agentName : null);
   const updateAgent = useUpdateAgent();
   const deleteAgent = useDeleteAgent();
   const [promptExpanded, setPromptExpanded] = useState(false);
@@ -112,231 +107,269 @@ export default function AgentConfigViewer({
         if (!v) handleClose();
       }}
     >
-        <DialogContent className="max-w-3xl max-h-[90vh] flex flex-col overflow-hidden">
-          <DialogHeader>
-            <DialogTitle className="font-headline text-2xl font-bold text-on-surface">
-              {agentName}
-            </DialogTitle>
-            <DialogDescription className="sr-only">
-              Agent configuration for {agentName}
+      <DialogContent className="max-w-3xl max-h-[90vh] flex flex-col overflow-hidden p-0 sm:p-0">
+        {/* Header */}
+        <div className="px-6 sm:px-8 pt-6 pb-4 border-b border-outline-variant/30 shrink-0">
+          <DialogHeader className="space-y-1.5">
+            <DialogTitle className="text-2xl">{agentName}</DialogTitle>
+            <DialogDescription>
+              {mode === "edit"
+                ? "Edit the agent configuration below, then save your changes."
+                : "View the agent configuration. Use Edit to modify or Export to download YAML."}
             </DialogDescription>
           </DialogHeader>
+        </div>
 
-        {mode === "edit" && config ? (
-          <AgentConfigForm
-            mode="edit"
-            initialData={config}
-            onSubmit={handleEditSubmit}
-            onCancel={() => setMode("view")}
-            isPending={updateAgent.isPending}
-          />
-        ) : (
-          <ScrollArea className="max-h-[70vh]">
-            {isLoading && (
-              <p className="text-on-surface-variant text-sm py-8 text-center">
-                Loading configuration...
-              </p>
-            )}
-
-            {error && (
-              <p className="text-destructive text-sm py-8 text-center">
-                Failed to load configuration: {error.message}
-              </p>
-            )}
+        {/* Body */}
+        <div className="flex-1 overflow-y-auto px-6 sm:px-8 py-6 overscroll-contain">
+          {mode === "edit" && config ? (
+            // When editing, the form uses its own (hidden lg:flex) footer for Submit/Cancel.
+            // Otherwise we rely on the dialog footer below (mobile view).
+            <>
+              <AgentConfigForm
+                mode="edit"
+                initialData={config}
+                onSubmit={handleEditSubmit}
+                onCancel={() => setMode("view")}
+                isPending={updateAgent.isPending}
+              />
+              {/* Mobile submit footer is rendered by the standalone footer below */}
+              <div className="lg:hidden flex items-center gap-3 mt-4 pt-4 border-t border-outline-variant/30">
+                <Button
+                  type="submit"
+                  form="agent-config-form"
+                  disabled={updateAgent.isPending}
+                  className="flex-1"
+                >
+                  {updateAgent.isPending ? "Saving…" : "Save Changes"}
+                </Button>
+              </div>
+            </>
+          ) : (
+            <ScrollArea className="max-h-[70vh]">
+              {isLoading && (
+                <p
+                  className="text-on-surface-variant text-sm py-8 text-center"
+                  aria-live="polite"
+                >
+                  Loading configuration…
+                </p>
+              )}
 
-            {config && (
-              <div className="space-y-6">
-                {/* Model & Debug */}
-                <div className="flex items-center gap-4">
-                  <div className="flex-1">
-                    <SectionLabel>Model</SectionLabel>
-                    <p className="text-on-surface text-sm">{config.model}</p>
-                  </div>
-                  <div>
-                    <SectionLabel>Debug</SectionLabel>
-                    <StatusBadge status={config.debug ? "Active" : "Off"} />
-                  </div>
-                </div>
+              {error && (
+                <p className="text-destructive text-sm py-8 text-center">
+                  Failed to load configuration: {error.message}
+                </p>
+              )}
 
-                {/* System Prompt */}
-                {config.system_prompt && (
-                  <div>
-                    <SectionLabel>System Prompt</SectionLabel>
-                    <div className="bg-surface-container-low rounded-xl p-4 text-xs text-on-surface font-mono leading-relaxed">
-                      {promptExpanded
-                        ? config.system_prompt
-                        : config.system_prompt.slice(0, 200)}
-                      {config.system_prompt.length > 200 && (
-                        <button
-                          type="button"
-                          onClick={() => setPromptExpanded(!promptExpanded)}
-                          className="ml-1 text-secondary-brand font-bold"
-                        >
-                          {promptExpanded ? "Show less" : "...Show more"}
-                        </button>
-                      )}
+              {config && (
+                <div className="space-y-6">
+                  {/* Model & Debug */}
+                  <div className="flex items-center gap-4">
+                    <div className="flex-1 min-w-0">
+                      <SectionLabel>Model</SectionLabel>
+                      <p className="text-on-surface text-sm font-mono break-all">
+                        {config.model}
+                      </p>
+                    </div>
+                    <div>
+                      <SectionLabel>Debug</SectionLabel>
+                      <StatusBadge status={config.debug ? "Active" : "Off"} />
                     </div>
                   </div>
-                )}
 
-                {/* Tools */}
-                {config.tools.length > 0 && (
-                  <div>
-                    <SectionLabel>Tools ({config.tools.length})</SectionLabel>
-                    <div className="flex flex-wrap gap-2">
-                      {config.tools.map((tool) => (
-                        <ToolTag key={tool} label={tool} />
-                      ))}
+                  {/* System Prompt */}
+                  {config.system_prompt && (
+                    <div>
+                      <SectionLabel>System Prompt</SectionLabel>
+                      <div className="bg-surface-container-low rounded-xl p-4 text-xs text-on-surface font-mono leading-relaxed max-h-60 overflow-y-auto overscroll-contain">
+                        {promptExpanded
+                          ? config.system_prompt
+                          : `${config.system_prompt.slice(0, 280)}…`}
+                        {config.system_prompt.length > 280 && (
+                          <button
+                            type="button"
+                            onClick={() => setPromptExpanded((p) => !p)}
+                            className="ml-2 text-secondary-brand font-bold font-headline text-[10px] uppercase tracking-widest hover:opacity-80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-brand focus-visible:ring-offset-2 rounded"
+                          >
+                            {promptExpanded ? "Show less" : "Show more"}
+                          </button>
+                        )}
+                      </div>
                     </div>
-                  </div>
-                )}
+                  )}
 
-                {/* Middleware */}
-                {config.middleware.length > 0 && (
-                  <div>
-                    <SectionLabel>
-                      Middleware ({config.middleware.length})
-                    </SectionLabel>
-                    <div className="flex flex-wrap gap-2">
-                      {config.middleware.map((mw) => (
-                        <ToolTag key={mw} label={mw} />
-                      ))}
+                  {/* Tools */}
+                  {config.tools.length > 0 && (
+                    <div>
+                      <SectionLabel>
+                        Tools ({config.tools.length})
+                      </SectionLabel>
+                      <div className="flex flex-wrap gap-2">
+                        {config.tools.map((tool) => (
+                          <ToolTag key={tool} label={tool} />
+                        ))}
+                      </div>
                     </div>
-                  </div>
-                )}
+                  )}
 
-                {/* Backend */}
-                <div>
-                  <SectionLabel>Backend</SectionLabel>
-                  <p className="text-on-surface text-sm">
-                    Type:{" "}
-                    <span className="font-mono">{config.backend.type}</span>
-                    {config.backend.root_dir && (
-                      <>
-                        {" "}
-                        &middot; Root:{" "}
-                        <span className="font-mono">
-                          {config.backend.root_dir}
-                        </span>
-                      </>
-                    )}
-                  </p>
-                </div>
+                  {/* Middleware */}
+                  {config.middleware.length > 0 && (
+                    <div>
+                      <SectionLabel>
+                        Middleware ({config.middleware.length})
+                      </SectionLabel>
+                      <div className="flex flex-wrap gap-2">
+                        {config.middleware.map((mw) => (
+                          <ToolTag key={mw} label={mw} />
+                        ))}
+                      </div>
+                    </div>
+                  )}
 
-                {/* HITL Rules */}
-                {Object.keys(config.hitl.rules).length > 0 && (
+                  {/* Backend */}
                   <div>
-                    <SectionLabel>HITL Rules</SectionLabel>
-                    <div className="bg-surface-container-low rounded-xl p-4 space-y-1">
-                      {Object.entries(config.hitl.rules).map(([key, value]) => (
-                        <div
-                          key={key}
-                          className="flex items-center justify-between text-xs"
-                        >
-                          <span className="font-mono text-on-surface">
-                            {key}
+                    <SectionLabel>Backend</SectionLabel>
+                    <p className="text-on-surface text-sm">
+                      Type:{" "}
+                      <span className="font-mono">{config.backend.type}</span>
+                      {config.backend.root_dir && (
+                        <>
+                          {" "}
+                          &middot; Root:{" "}
+                          <span className="font-mono">
+                            {config.backend.root_dir}
                           </span>
-                          <span className="text-on-surface-variant">
-                            {(() => {
-                              if (typeof value === "boolean")
-                                return value ? "Enabled" : "Disabled";
-                              return JSON.stringify(value);
-                            })()}
-                          </span>
-                        </div>
-                      ))}
-                    </div>
+                        </>
+                      )}
+                    </p>
                   </div>
-                )}
 
-                {/* MCP Servers */}
-                {config.mcp_servers.length > 0 && (
-                  <div>
-                    <SectionLabel>
-                      MCP Servers ({config.mcp_servers.length})
-                    </SectionLabel>
-                    <div className="space-y-2">
-                      {config.mcp_servers.map((server) => (
-                        <div
-                          key={server.name}
-                          className="bg-surface-container-low rounded-xl p-3 flex items-center justify-between"
-                        >
-                          <span className="text-sm font-medium text-on-surface">
-                            {server.name}
-                          </span>
-                          <ToolTag label={server.transport} />
-                        </div>
-                      ))}
+                  {/* HITL Rules */}
+                  {Object.keys(config.hitl.rules).length > 0 && (
+                    <div>
+                      <SectionLabel>HITL Rules</SectionLabel>
+                      <div className="bg-surface-container-low rounded-xl p-4 space-y-1">
+                        {Object.entries(config.hitl.rules).map(([key, value]) => (
+                          <div
+                            key={key}
+                            className="flex items-center justify-between text-xs"
+                          >
+                            <span className="font-mono text-on-surface break-all">
+                              {key}
+                            </span>
+                            <span className="text-on-surface-variant ml-3 shrink-0">
+                              {(() => {
+                                if (typeof value === "boolean")
+                                  return value ? "Enabled" : "Disabled";
+                                return JSON.stringify(value);
+                              })()}
+                            </span>
+                          </div>
+                        ))}
+                      </div>
                     </div>
-                  </div>
-                )}
+                  )}
 
-                {/* Subagents */}
-                {config.subagents.length > 0 && (
-                  <div>
-                    <SectionLabel>
-                      Subagents ({config.subagents.length})
-                    </SectionLabel>
-                    <div className="space-y-2">
-                      {config.subagents.map((sub) => (
-                        <div
-                          key={sub.name}
-                          className="bg-surface-container-low rounded-xl p-3"
-                        >
-                          <p className="text-sm font-medium text-on-surface">
-                            {sub.name}
-                          </p>
-                          <p className="text-xs text-on-surface-variant mt-1">
-                            {sub.description}
-                          </p>
-                        </div>
-                      ))}
+                  {/* MCP Servers */}
+                  {config.mcp_servers.length > 0 && (
+                    <div>
+                      <SectionLabel>
+                        MCP Servers ({config.mcp_servers.length})
+                      </SectionLabel>
+                      <div className="space-y-2">
+                        {config.mcp_servers.map((server) => (
+                          <div
+                            key={server.name}
+                            className="bg-surface-container-low rounded-xl p-3 flex items-center justify-between"
+                          >
+                            <span className="text-sm font-medium text-on-surface">
+                              {server.name}
+                            </span>
+                            <ToolTag label={server.transport} />
+                          </div>
+                        ))}
+                      </div>
                     </div>
-                  </div>
-                )}
-              </div>
-            )}
-          </ScrollArea>
-        )}
+                  )}
 
-        {/* Actions */}
-        <Separator />
-        <div className="flex items-center gap-3">
-          {mode === "view" && (
-            <>
+                  {/* Subagents */}
+                  {config.subagents.length > 0 && (
+                    <div>
+                      <SectionLabel>
+                        Subagents ({config.subagents.length})
+                      </SectionLabel>
+                      <div className="space-y-2">
+                        {config.subagents.map((sub) => (
+                          <div
+                            key={sub.name}
+                            className="bg-surface-container-low rounded-xl p-3"
+                          >
+                            <p className="text-sm font-medium text-on-surface">
+                              {sub.name}
+                            </p>
+                            <p className="text-xs text-on-surface-variant mt-1">
+                              {sub.description}
+                            </p>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )}
+            </ScrollArea>
+          )}
+        </div>
+
+        {/* Footer — view mode actions */}
+        {mode === "view" && (
+          <div className="shrink-0 px-6 sm:px-8 py-4 border-t border-outline-variant/30 bg-surface-container-lowest">
+            <div className="flex items-center gap-3">
               <Button
                 type="button"
                 variant="outline"
                 onClick={handleExportYaml}
                 disabled={!config}
-                className="px-6 py-3 rounded-full font-headline text-xs font-bold uppercase tracking-widest"
               >
-                <span className="material-symbols-outlined text-sm mr-1">download</span>{" "}
-                Export YAML
+                <span
+                  className="material-symbols-outlined text-sm mr-1"
+                  aria-hidden="true"
+                >
+                  download
+                </span>
+                <span className="hidden sm:inline">Export YAML</span>
+                <span className="sm:hidden">Export</span>
               </Button>
               <Button
                 type="button"
-                onClick={() => {
-                  setMode("edit");
-                }}
+                onClick={() => setMode("edit")}
                 disabled={!config}
-                className="px-6 py-3 rounded-full bg-primary-container text-white font-headline text-xs font-bold uppercase tracking-widest hover:opacity-90 transition-opacity"
               >
-                <span className="material-symbols-outlined text-sm mr-1">edit</span>{" "}
-                Edit
+                <span
+                  className="material-symbols-outlined text-sm mr-1"
+                  aria-hidden="true"
+                >
+                  edit
+                </span>
+                <span className="hidden sm:inline">Edit</span>
+                <span className="sm:hidden">Edit</span>
               </Button>
               <div className="flex-1" />
               <button
                 type="button"
                 onClick={handleDelete}
                 disabled={deleteAgent.isPending}
-                className="px-6 py-3 rounded-full bg-red-600 text-white font-headline text-xs font-bold uppercase tracking-widest hover:bg-red-700 transition-colors disabled:opacity-50"
+                className="px-6 py-2.5 h-10 rounded-full bg-destructive text-white font-headline text-xs font-bold uppercase tracking-widest hover:opacity-90 transition-opacity disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive focus-visible:ring-offset-2 inline-flex items-center gap-2"
               >
                 {confirmDelete ? "Confirm Delete?" : "Delete"}
               </button>
-            </>
-          )}
-        </div>
+            </div>
+          </div>
+        )}
+
+        {/* Edit mode footer is rendered by AgentConfigForm itself (desktop)
+            and the inline mobile button above when editing. */}
       </DialogContent>
     </Dialog>
   );
@@ -344,8 +377,8 @@ export default function AgentConfigViewer({
 
 function SectionLabel({ children }: Readonly<{ children: React.ReactNode }>) {
   return (
-    <h4 className="text-[10px] font-bold uppercase tracking-widest text-on-surface-variant mb-2">
+    <h4 className="text-[10px] font-bold font-headline uppercase tracking-widest text-on-surface-variant mb-2">
       {children}
     </h4>
   );
-}
+}
\ No newline at end of file
diff --git a/src/application/components/agent/CreateAgentDialog.tsx b/src/application/components/agent/CreateAgentDialog.tsx
index 35063c5..6ea75f8 100644
--- a/src/application/components/agent/CreateAgentDialog.tsx
+++ b/src/application/components/agent/CreateAgentDialog.tsx
@@ -1,12 +1,7 @@
 import { useState, useRef } from "react";
 import { toast } from "sonner";
 import { useCreateAgent } from "@/application/hooks/agent/useCreateAgent";
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@/application/components/ui/tabs";
+import SegmentedToggle from "@/application/components/shared/SegmentedToggle";
 import {
   Dialog,
   DialogContent,
@@ -24,17 +19,24 @@ interface CreateAgentDialogProps {
   readonly onOpenChange: (open: boolean) => void;
 }
 
+type CreateMode = "form" | "yaml";
+
+const MODE_OPTIONS = [
+  { value: "form" as const, label: "Form" },
+  { value: "yaml" as const, label: "Upload YAML" },
+];
+
 export default function CreateAgentDialog({
   open,
   onOpenChange,
 }: Readonly<CreateAgentDialogProps>) {
-  const [tab, setTab] = useState("form");
+  const [mode, setMode] = useState<CreateMode>("form");
   const [name, setName] = useState("");
   const fileInputRef = useRef<HTMLInputElement>(null);
   const createAgent = useCreateAgent();
 
   function handleClose() {
-    setTab("form");
+    setMode("form");
     setName("");
     if (fileInputRef.current) fileInputRef.current.value = "";
     onOpenChange(false);
@@ -54,7 +56,7 @@ export default function CreateAgentDialog({
       {
         onSuccess: () => {
           toast.success("Agent created successfully");
-          onOpenChange(false);
+          handleClose();
         },
         onError: (error) => {
           toast.error(error.message);
@@ -63,7 +65,7 @@ export default function CreateAgentDialog({
     );
   }
 
-  function handleYamlSubmit(e: { preventDefault: () => void }) {
+  function handleYamlSubmit(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
     const file = fileInputRef.current?.files?.[0];
     if (!name.trim()) {
@@ -79,9 +81,7 @@ export default function CreateAgentDialog({
       {
         onSuccess: () => {
           toast.success("Agent created successfully");
-          setName("");
-          if (fileInputRef.current) fileInputRef.current.value = "";
-          onOpenChange(false);
+          handleClose();
         },
         onError: (error) => {
           toast.error(error.message);
@@ -91,42 +91,55 @@ export default function CreateAgentDialog({
   }
 
   return (
-    <Dialog open={open} onOpenChange={(v) => { if (!v) handleClose(); }}>
-      <DialogContent className="max-w-3xl max-h-[90vh] flex flex-col overflow-hidden">
-        <DialogHeader>
-          <DialogTitle className="font-headline text-2xl font-bold text-on-surface">
-            Create Agent
-          </DialogTitle>
-          <DialogDescription className="sr-only">
-            Create a new agent via form or YAML upload
-          </DialogDescription>
-        </DialogHeader>
+    <Dialog
+      open={open}
+      onOpenChange={(v) => {
+        if (!v) handleClose();
+      }}
+    >
+      <DialogContent className="max-w-3xl max-h-[90vh] flex flex-col overflow-hidden p-0 sm:p-0">
+        {/* Header — description visible for hierarchy */}
+        <div className="px-6 sm:px-8 pt-6 pb-4 border-b border-outline-variant/30 shrink-0">
+          <DialogHeader className="space-y-2">
+            <DialogTitle className="text-2xl">Create Agent</DialogTitle>
+            <DialogDescription>
+              Configure a new agent via form, or upload an existing YAML
+              configuration.
+            </DialogDescription>
+          </DialogHeader>
 
-        <Tabs value={tab} onValueChange={setTab}>
-          <TabsList className="w-full">
-            <TabsTrigger value="form" className="flex-1">
-              Form
-            </TabsTrigger>
-            <TabsTrigger value="yaml" className="flex-1">
-              Upload YAML
-            </TabsTrigger>
-          </TabsList>
+          {/* Mode toggle */}
+          <div className="mt-4">
+            <SegmentedToggle
+              value={mode}
+              options={MODE_OPTIONS}
+              onChange={(v) => setMode(v as CreateMode)}
+              pattern="toggle"
+              ariaLabel="Creation mode"
+              itemClassName="px-6 py-1.5 text-xs"
+            />
+          </div>
+        </div>
 
-          <TabsContent value="form" className="mt-4">
+        {/* Body — scrollable */}
+        <div className="flex-1 overflow-y-auto px-6 sm:px-8 py-6 overscroll-contain">
+          {mode === "form" ? (
             <AgentConfigForm
               mode="create"
               onSubmit={handleFormSubmit}
               onCancel={handleClose}
               isPending={createAgent.isPending}
             />
-          </TabsContent>
-
-          <TabsContent value="yaml" className="mt-4">
-            <form onSubmit={handleYamlSubmit} className="space-y-6">
+          ) : (
+            <form
+              id="agent-yaml-form"
+              onSubmit={handleYamlSubmit}
+              className="space-y-6"
+            >
               <div>
                 <label
                   htmlFor="agent-name"
-                  className="block text-xs font-bold uppercase tracking-widest text-on-surface-variant mb-2"
+                  className="block text-[10px] font-bold font-headline uppercase tracking-widest text-on-surface-variant mb-2"
                 >
                   Agent Name
                 </label>
@@ -135,15 +148,17 @@ export default function CreateAgentDialog({
                   type="text"
                   value={name}
                   onChange={(e) => setName(e.target.value)}
-                  placeholder="my-agent"
-                  className="w-full px-4 py-3 rounded-xl bg-surface-container-low border border-outline-variant/30 text-on-surface text-sm focus:outline-none focus:ring-2 focus:ring-secondary-brand/40 transition-shadow"
+                  placeholder="my-agent…"
+                  autoComplete="off"
+                  spellCheck={false}
+                  className="flex h-10 w-full rounded-lg border border-outline-variant/60 bg-surface-container-lowest px-3 py-2 text-sm text-on-surface placeholder:text-outline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-brand/50 focus-visible:border-secondary-brand/60 transition-colors"
                 />
               </div>
 
               <div>
                 <label
                   htmlFor="agent-yaml"
-                  className="block text-xs font-bold uppercase tracking-widest text-on-surface-variant mb-2"
+                  className="block text-[10px] font-bold font-headline uppercase tracking-widest text-on-surface-variant mb-2"
                 >
                   YAML Configuration
                 </label>
@@ -152,30 +167,44 @@ export default function CreateAgentDialog({
                   ref={fileInputRef}
                   type="file"
                   accept=".yaml,.yml"
-                  className="w-full text-sm text-on-surface-variant file:mr-4 file:px-4 file:py-2 file:rounded-full file:border-0 file:text-xs file:font-bold file:uppercase file:tracking-widest file:bg-surface-container file:text-on-surface-variant hover:file:bg-surface-container-high file:transition-colors file:cursor-pointer"
+                  className="w-full text-sm text-on-surface-variant file:mr-4 file:px-4 file:py-2 file:rounded-full file:border-0 file:text-xs file:font-bold file:uppercase file:tracking-widest file:bg-surface-container file:text-on-surface-variant hover:file:bg-surface-container-high file:transition-colors file:cursor-pointer file:font-headline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-brand/50 rounded-lg"
                 />
               </div>
-
-              <div className="flex items-center gap-3 pt-2">
-                <button
-                  type="button"
-                  onClick={handleClose}
-                  className="flex-1 px-6 py-3 rounded-full border border-outline-variant/30 text-on-surface-variant font-headline text-xs font-bold uppercase tracking-widest hover:bg-surface-container transition-colors"
-                >
-                  Cancel
-                </button>
-                <button
-                  type="submit"
-                  disabled={createAgent.isPending}
-                  className="flex-1 px-6 py-3 rounded-full bg-primary-container text-white font-headline text-xs font-bold uppercase tracking-widest hover:opacity-90 transition-opacity disabled:opacity-50"
-                >
-                  {createAgent.isPending ? "Creating..." : "Create"}
-                </button>
-              </div>
             </form>
-          </TabsContent>
-        </Tabs>
+          )}
+        </div>
+
+        {/* Footer — sticky at bottom */}
+        <div className="shrink-0 px-6 sm:px-8 py-4 border-t border-outline-variant/30 bg-surface-container-lowest flex items-center gap-3">
+          <button
+            type="button"
+            onClick={handleClose}
+            className="flex-1 sm:flex-initial px-6 py-3 rounded-full border border-outline-variant/60 text-on-surface-variant font-headline text-xs font-bold uppercase tracking-widest hover:bg-surface-container transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-brand focus-visible:ring-offset-2"
+          >
+            Cancel
+          </button>
+          {mode === "form" ? (
+            // The form triggers its own submit; we use a form attribute to bind.
+            <button
+              type="submit"
+              form="agent-config-form"
+              disabled={createAgent.isPending}
+              className="flex-1 sm:flex-initial px-6 py-3 rounded-full bg-primary-container text-white font-headline text-xs font-bold uppercase tracking-widest hover:opacity-90 transition-opacity disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-brand focus-visible:ring-offset-2"
+            >
+              {createAgent.isPending ? "Creating…" : "Create Agent"}
+            </button>
+          ) : (
+            <button
+              type="submit"
+              form="agent-yaml-form"
+              disabled={createAgent.isPending}
+              className="flex-1 sm:flex-initial px-6 py-3 rounded-full bg-primary-container text-white font-headline text-xs font-bold uppercase tracking-widest hover:opacity-90 transition-opacity disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-brand focus-visible:ring-offset-2"
+            >
+              {createAgent.isPending ? "Creating…" : "Create Agent"}
+            </button>
+          )}
+        </div>
       </DialogContent>
     </Dialog>
   );
-}
+}
\ No newline at end of file
diff --git a/src/application/components/agent/HITLEditor.tsx b/src/application/components/agent/HITLEditor.tsx
index 30f3d57..b1000ea 100644
--- a/src/application/components/agent/HITLEditor.tsx
+++ b/src/application/components/agent/HITLEditor.tsx
@@ -99,10 +99,15 @@ export default function HITLEditor({
           <button
             type="button"
             onClick={() => removeRule(key)}
-            className="rounded-full hover:bg-destructive/20 p-0.5"
+            className="rounded-full hover:bg-destructive/15 p-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive focus-visible:ring-inset"
             aria-label={`Remove ${key}`}
           >
-            <span className="material-symbols-outlined text-xs">close</span>
+            <span
+              className="material-symbols-outlined text-xs"
+              aria-hidden="true"
+            >
+              close
+            </span>
           </button>
         </div>
       ))}
diff --git a/src/application/components/agent/KeyValueEditor.tsx b/src/application/components/agent/KeyValueEditor.tsx
index 63e41a7..55ce3b6 100644
--- a/src/application/components/agent/KeyValueEditor.tsx
+++ b/src/application/components/agent/KeyValueEditor.tsx
@@ -81,10 +81,15 @@ export default function KeyValueEditor({
               <button
                 type="button"
                 onClick={() => removeEntry(k)}
-                className="shrink-0 rounded-full hover:bg-destructive/20 p-0.5"
+                className="shrink-0 rounded-full hover:bg-destructive/15 p-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive focus-visible:ring-inset"
                 aria-label={`Remove ${k}`}
               >
-                <span className="material-symbols-outlined text-xs">close</span>
+                <span
+                  className="material-symbols-outlined text-xs"
+                  aria-hidden="true"
+                >
+                  close
+                </span>
               </button>
             </div>
           ))}
diff --git a/src/application/components/agent/McpServerEditor.tsx b/src/application/components/agent/McpServerEditor.tsx
index 49c1484..a4540b2 100644
--- a/src/application/components/agent/McpServerEditor.tsx
+++ b/src/application/components/agent/McpServerEditor.tsx
@@ -45,7 +45,12 @@ export default function McpServerEditor({
           onClick={onRemove}
           aria-label="Remove server"
         >
-          <span className="material-symbols-outlined text-sm">delete</span>
+          <span
+            className="material-symbols-outlined text-sm"
+            aria-hidden="true"
+          >
+            delete
+          </span>
         </Button>
       </div>
 
@@ -96,7 +101,7 @@ export default function McpServerEditor({
             label="Args"
             value={value.args}
             onChange={(args) => update({ args })}
-            placeholder="Add argument..."
+            placeholder="Add argument…"
           />
         </>
       )}
diff --git a/src/application/components/agent/StringListEditor.tsx b/src/application/components/agent/StringListEditor.tsx
index f535734..36175cd 100644
--- a/src/application/components/agent/StringListEditor.tsx
+++ b/src/application/components/agent/StringListEditor.tsx
@@ -15,7 +15,7 @@ export default function StringListEditor({
   label,
   value,
   onChange,
-  placeholder = "Add item...",
+  placeholder = "Add item…",
 }: Readonly<StringListEditorProps>) {
   const [inputValue, setInputValue] = useState("");
   const inputId = useId();
@@ -69,10 +69,15 @@ export default function StringListEditor({
               <button
                 type="button"
                 onClick={() => removeItem(index)}
-                className="ml-0.5 rounded-full hover:bg-destructive/20 p-0.5"
+                className="ml-0.5 rounded-full hover:bg-destructive/15 p-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive focus-visible:ring-inset"
                 aria-label={`Remove ${item}`}
               >
-                <span className="material-symbols-outlined text-xs">close</span>
+                <span
+                  className="material-symbols-outlined text-xs"
+                  aria-hidden="true"
+                >
+                  close
+                </span>
               </button>
             </Badge>
           ))}
diff --git a/src/application/components/agent/SubAgentEditor.tsx b/src/application/components/agent/SubAgentEditor.tsx
index 467d12d..88ed451 100644
--- a/src/application/components/agent/SubAgentEditor.tsx
+++ b/src/application/components/agent/SubAgentEditor.tsx
@@ -36,7 +36,12 @@ export default function SubAgentEditor({
           onClick={onRemove}
           aria-label="Remove subagent"
         >
-          <span className="material-symbols-outlined text-sm">delete</span>
+          <span
+            className="material-symbols-outlined text-sm"
+            aria-hidden="true"
+          >
+            delete
+          </span>
         </Button>
       </div>
 
@@ -98,14 +103,14 @@ export default function SubAgentEditor({
         label="Tools"
         value={value.tools}
         onChange={(tools) => update({ tools })}
-        placeholder="Add tool..."
+        placeholder="Add tool…"
       />
 
       <StringListEditor
         label="Skills"
         value={value.skills}
         onChange={(skills) => update({ skills })}
-        placeholder="Add skill..."
+        placeholder="Add skill…"
       />
     </div>
   );
diff --git a/src/application/components/chat/ChatMessage.tsx b/src/application/components/chat/ChatMessage.tsx
index 21615e8..c6dd5f9 100644
--- a/src/application/components/chat/ChatMessage.tsx
+++ b/src/application/components/chat/ChatMessage.tsx
@@ -1,3 +1,4 @@
+import { memo } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { cn } from "@/application/lib/utils";
@@ -19,13 +20,13 @@ interface ChatMessageProps {
 
 function formatTimestamp(ts: string): string {
   const date = new Date(ts);
-  return date.toLocaleTimeString("en-US", {
+  return new Intl.DateTimeFormat("en-US", {
     hour: "2-digit",
     minute: "2-digit",
-  });
+  }).format(date);
 }
 
-export default function ChatMessage({
+function ChatMessageImpl({
   message,
   agentName,
   threadId,
@@ -37,16 +38,18 @@ export default function ChatMessage({
   if (isHuman) {
     return (
       <div className="flex justify-end">
-        <div className="max-w-4xl">
+        <article className="max-w-4xl min-w-0">
           <div className="bg-surface-container-highest p-6 rounded-xl rounded-tr-none">
-            <p className="text-on-surface text-sm leading-relaxed whitespace-pre-wrap">
+            <p className="text-on-surface text-sm leading-relaxed whitespace-pre-wrap break-words">
               {message.content}
             </p>
           </div>
           <p className="text-[11px] text-on-surface-variant mt-2 text-right">
-            {formatTimestamp(message.timestamp)}
+            <time dateTime={message.timestamp}>
+              {formatTimestamp(message.timestamp)}
+            </time>
           </p>
-        </div>
+        </article>
       </div>
     );
   }
@@ -55,12 +58,15 @@ export default function ChatMessage({
     return (
       <div className="flex gap-3 max-w-4xl">
         <div className="w-8 h-8 rounded-lg bg-primary-container flex items-center justify-center shrink-0 mt-1">
-          <span className="material-symbols-outlined text-white text-sm">
+          <span
+            className="material-symbols-outlined text-white text-sm"
+            aria-hidden="true"
+          >
             hub
           </span>
         </div>
 
-        <div className="flex-1 min-w-0">
+        <article className="flex-1 min-w-0">
           <div className="flex items-center gap-2 mb-2">
             <span className="font-headline font-bold text-sm text-on-surface">
               {agentName}
@@ -96,9 +102,11 @@ export default function ChatMessage({
           )}
 
           <p className="text-[11px] text-on-surface-variant mt-2">
-            {formatTimestamp(message.timestamp)}
+            <time dateTime={message.timestamp}>
+              {formatTimestamp(message.timestamp)}
+            </time>
           </p>
-        </div>
+        </article>
       </div>
     );
   }
@@ -111,3 +119,17 @@ export default function ChatMessage({
     </div>
   );
 }
+
+/**
+ * Memoized message component: parent MessageList re-renders when streaming
+ * state changes, but committed messages don't need to re-render.
+ */
+const ChatMessage = memo(ChatMessageImpl, (prev, next) => {
+  return (
+    prev.agentName === next.agentName &&
+    prev.threadId === next.threadId &&
+    prev.message === next.message
+  );
+});
+
+export default ChatMessage;
\ No newline at end of file
diff --git a/src/application/components/chat/MessageList.tsx b/src/application/components/chat/MessageList.tsx
index d8b1c33..694040c 100644
--- a/src/application/components/chat/MessageList.tsx
+++ b/src/application/components/chat/MessageList.tsx
@@ -43,7 +43,9 @@ export default function MessageList({
   if (isLoading) {
     return (
       <div className="flex-1 flex items-center justify-center">
-        <p className="text-on-surface-variant text-sm">Loading messages...</p>
+        <p className="text-on-surface-variant text-sm" aria-live="polite">
+          Loading messages…
+        </p>
       </div>
     );
   }
@@ -54,7 +56,10 @@ export default function MessageList({
     return (
       <div className="flex-1 flex items-center justify-center px-6">
         <div className="text-center">
-          <span className="material-symbols-outlined text-6xl text-outline-variant/40 mb-4 block">
+          <span
+            className="material-symbols-outlined text-6xl text-outline-variant/40 mb-4 block"
+            aria-hidden="true"
+          >
             chat_bubble_outline
           </span>
           <p className="text-on-surface-variant text-sm font-headline">
@@ -99,7 +104,10 @@ export default function MessageList({
         {isStreaming && (
           <div className="flex gap-3 max-w-4xl">
             <div className="w-8 h-8 rounded-lg bg-primary-container flex items-center justify-center shrink-0 mt-1">
-              <span className="material-symbols-outlined text-white text-sm">
+              <span
+                className="material-symbols-outlined text-white text-sm"
+                aria-hidden="true"
+              >
                 hub
               </span>
             </div>
@@ -119,13 +127,17 @@ export default function MessageList({
                 )}
                 <ThinkingBlock text={streamingThinking} />
                 <StructuredResponseCard data={structuredResponse} />
-                <div className="flex items-center gap-2 text-on-surface-variant text-xs mt-2">
-                  <span className="material-symbols-outlined animate-spin text-secondary-brand text-base">
+                <div
+                  className="flex items-center gap-2 text-on-surface-variant text-xs mt-2"
+                  aria-live="polite"
+                >
+                  <span
+                    className="material-symbols-outlined animate-spin text-secondary-brand text-base"
+                    aria-hidden="true"
+                  >
                     progress_activity
                   </span>
-                  <span>
-                    {streamingContent ? "Processing..." : "Thinking..."}
-                  </span>
+                  <span>{streamingContent ? "Processing…" : "Thinking…"}</span>
                 </div>
               </div>
             </div>
@@ -134,8 +146,11 @@ export default function MessageList({
 
         {error && !isStreaming && (
           <div className="flex gap-3 max-w-4xl">
-            <div className="w-8 h-8 rounded-lg bg-error-container flex items-center justify-center shrink-0 mt-1">
-              <span className="material-symbols-outlined text-error text-sm">
+            <div className="w-8 h-8 rounded-lg bg-destructive/10 flex items-center justify-center shrink-0 mt-1">
+              <span
+                className="material-symbols-outlined text-destructive text-sm"
+                aria-hidden="true"
+              >
                 error
               </span>
             </div>
@@ -145,11 +160,11 @@ export default function MessageList({
                   {agentName}
                 </span>
               </div>
-              <div className="bg-error-container/30 p-6 rounded-xl rounded-tl-none border border-error/20">
-                <p className="text-error text-sm font-medium">
+              <div className="bg-destructive/5 p-6 rounded-xl rounded-tl-none border border-destructive/20">
+                <p className="text-destructive text-sm font-medium">
                   Something went wrong
                 </p>
-                <p className="text-error/80 text-xs mt-1">{error}</p>
+                <p className="text-destructive/80 text-xs mt-1">{error}</p>
               </div>
             </div>
           </div>
diff --git a/src/application/components/layout/MainLayout.tsx b/src/application/components/layout/MainLayout.tsx
index 3815188..a812142 100644
--- a/src/application/components/layout/MainLayout.tsx
+++ b/src/application/components/layout/MainLayout.tsx
@@ -8,6 +8,19 @@ interface MainLayoutProps {
   activeThreadId?: string;
 }
 
+const MAIN_ID = "main-content";
+
+function SkipLink() {
+  return (
+    <a
+      href={`#${MAIN_ID}`}
+      className="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-[100] focus:px-4 focus:py-2 focus:rounded-lg focus:bg-on-surface focus:text-white focus:shadow-lg focus:font-headline focus:text-xs focus:font-bold focus:uppercase focus:tracking-widest"
+    >
+      Skip to content
+    </a>
+  );
+}
+
 export default function MainLayout({
   children,
   showSidebar = false,
@@ -15,11 +28,18 @@ export default function MainLayout({
 }: Readonly<MainLayoutProps>) {
   return (
     <div className="flex flex-col h-screen overflow-hidden bg-background">
+      <SkipLink />
       <TopNav />
       <div className="flex flex-1 overflow-hidden">
         {showSidebar && <ThreadSidebar activeThreadId={activeThreadId} />}
-        <main className="flex-1 flex flex-col overflow-hidden">{children}</main>
+        <main
+          id={MAIN_ID}
+          tabIndex={-1}
+          className="flex-1 flex flex-col overflow-hidden outline-none scroll-mt-24"
+        >
+          {children}
+        </main>
       </div>
     </div>
   );
-}
+}
\ No newline at end of file
diff --git a/src/application/components/layout/ThreadSidebar.tsx b/src/application/components/layout/ThreadSidebar.tsx
index 95e9887..b099c6a 100644
--- a/src/application/components/layout/ThreadSidebar.tsx
+++ b/src/application/components/layout/ThreadSidebar.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useMemo, useState, useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 import { cn } from "@/application/lib/utils";
 import { useThreads } from "@/application/hooks/chat/useThreads";
@@ -6,6 +6,13 @@ import { useAgents } from "@/application/hooks/agent/useAgents";
 import { useCreateThread } from "@/application/hooks/chat/useCreateThread";
 import { useChatStore } from "@/application/stores/useChatStore";
 import type { Thread } from "@/domain/entities/chat/thread";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/application/components/ui/dialog";
 
 interface ThreadSidebarProps {
   activeThreadId?: string;
@@ -13,12 +20,17 @@ interface ThreadSidebarProps {
 
 function formatDate(dateStr: string): string {
   const date = new Date(dateStr);
-  return date.toLocaleDateString("en-US", {
+  return new Intl.DateTimeFormat("en-US", {
     month: "short",
     day: "numeric",
     hour: "2-digit",
     minute: "2-digit",
-  });
+  }).format(date);
+}
+
+function getThreadPreview(thread: Thread): string {
+  // Prefer first agent message content if available in the future; for now show a short id-based preview.
+  return `Thread · ${thread.id.slice(0, 8)}`;
 }
 
 export default function ThreadSidebar({
@@ -31,6 +43,16 @@ export default function ThreadSidebar({
   const navigate = useNavigate();
   const [showAgentDialog, setShowAgentDialog] = useState(false);
 
+  // Close agent dialog when escape is pressed (Dialog handles it, but ensure state sync).
+  useEffect(() => {
+    if (!showAgentDialog) return;
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "Escape") setShowAgentDialog(false);
+    }
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [showAgentDialog]);
+
   const grouped = useMemo(() => {
     if (!threads) return new Map<string, Thread[]>();
     const map = new Map<string, Thread[]>();
@@ -58,28 +80,40 @@ export default function ThreadSidebar({
         navigate(`/chat/${thread.id}`);
         setShowAgentDialog(false);
       },
+      onError: () => setShowAgentDialog(false),
     });
   }
 
   return (
-    <aside className="w-64 bg-surface-container-low border-r border-outline-variant/30 flex flex-col overflow-hidden">
+    <aside
+      className="w-64 bg-surface-container-low border-r border-outline-variant/30 flex flex-col overflow-hidden shrink-0"
+      aria-label="Conversation threads"
+    >
       {/* New Conversation */}
       <div className="p-4">
         <button
           type="button"
           onClick={handleNewConversation}
-          className="w-full flex items-center gap-2 px-4 py-3 rounded-xl bg-primary-container text-white font-headline text-xs font-bold uppercase tracking-widest hover:opacity-90 transition-opacity"
+          className="w-full flex items-center gap-2 px-4 py-3 rounded-xl bg-primary-container text-white font-headline text-xs font-bold uppercase tracking-widest hover:opacity-90 transition-opacity focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-brand focus-visible:ring-offset-2"
         >
-          <span className="material-symbols-outlined text-base">add</span> New
-          Conversation
+          <span
+            className="material-symbols-outlined text-base"
+            aria-hidden="true"
+          >
+            add
+          </span>
+          New Conversation
         </button>
       </div>
 
       {/* Thread list */}
-      <div className="flex-1 overflow-y-auto px-2 pb-4">
+      <div className="flex-1 overflow-y-auto px-2 pb-4 overscroll-contain">
         {isLoading && (
-          <p className="text-xs text-on-surface-variant px-3 py-2">
-            Loading threads...
+          <p
+            className="text-xs text-on-surface-variant px-3 py-2"
+            aria-live="polite"
+          >
+            Loading threads…
           </p>
         )}
 
@@ -87,7 +121,10 @@ export default function ThreadSidebar({
           <div key={agentName} className="mb-4">
             {/* Agent group header */}
             <div className="flex items-center gap-2 px-3 py-2">
-              <span className="material-symbols-outlined text-sm text-on-surface-variant">
+              <span
+                className="material-symbols-outlined text-sm text-on-surface-variant"
+                aria-hidden="true"
+              >
                 hub
               </span>
               <span className="text-[10px] font-bold uppercase tracking-widest text-on-surface-variant">
@@ -96,29 +133,33 @@ export default function ThreadSidebar({
             </div>
 
             {/* Threads */}
-            {agentThreads.map((thread) => {
-              const isActive = thread.id === activeThreadId;
-              return (
-                <button
-                  key={thread.id}
-                  type="button"
-                  onClick={() => handleThreadClick(thread.id)}
-                  className={cn(
-                    "w-full text-left px-3 py-2.5 rounded-lg transition-colors text-sm",
-                    isActive
-                      ? "bg-slate-200 border-l-4 border-secondary-brand font-medium"
-                      : "hover:bg-surface-container-high",
-                  )}
-                >
-                  <span className="block text-on-surface text-xs font-medium truncate">
-                    Thread
-                  </span>
-                  <span className="block text-[11px] text-on-surface-variant mt-0.5">
-                    {formatDate(thread.created_at)}
-                  </span>
-                </button>
-              );
-            })}
+            <ul className="space-y-1">
+              {agentThreads.map((thread) => {
+                const isActive = thread.id === activeThreadId;
+                return (
+                  <li key={thread.id}>
+                    <button
+                      type="button"
+                      onClick={() => handleThreadClick(thread.id)}
+                      aria-current={isActive ? "page" : undefined}
+                      className={cn(
+                        "w-full text-left px-3 py-2.5 rounded-lg transition-colors text-sm min-w-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-brand focus-visible:ring-inset",
+                        isActive
+                          ? "bg-surface-container-high border-l-4 border-secondary-brand font-medium"
+                          : "hover:bg-surface-container-high/60",
+                      )}
+                    >
+                      <span className="block text-on-surface text-xs font-medium truncate">
+                        {getThreadPreview(thread)}
+                      </span>
+                      <span className="block text-[11px] text-on-surface-variant mt-0.5">
+                        {formatDate(thread.created_at)}
+                      </span>
+                    </button>
+                  </li>
+                );
+              })}
+            </ul>
           </div>
         ))}
 
@@ -130,57 +171,51 @@ export default function ThreadSidebar({
       </div>
 
       {/* Agent selection dialog */}
-      {showAgentDialog && (
-        <div
-          className="fixed inset-0 z-50 bg-black/30 overflow-y-auto flex items-start justify-center pt-[10vh]"
-          onClick={() => setShowAgentDialog(false)}
-          onKeyDown={(e) => {
-            if (e.key === "Escape") setShowAgentDialog(false);
-          }}
-          role="dialog"
-          aria-modal="true"
-          aria-labelledby="agent-dialog-title"
-        >
-          <div
-            role="document"
-            className="w-80 max-h-[80vh] my-8"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <div className="bg-white rounded-xl p-6 w-full overflow-y-auto shadow-xl">
-              <h3
-                id="agent-dialog-title"
-                className="font-headline text-lg font-bold mb-4"
-              >
-                Choose an Agent
-              </h3>
-              {agentsLoading ? (
-                <p className="text-sm text-on-surface-variant">
-                  Loading agents...
+      <Dialog
+        open={showAgentDialog}
+        onOpenChange={(v) => setShowAgentDialog(v)}
+      >
+        <DialogContent className="max-w-sm w-full">
+          <DialogHeader>
+            <DialogTitle className="font-headline text-lg font-bold">
+              Choose an Agent
+            </DialogTitle>
+            <DialogDescription className="sr-only">
+              Select an agent to start a new conversation thread
+            </DialogDescription>
+          </DialogHeader>
+          {agentsLoading ? (
+            <p
+              className="text-sm text-on-surface-variant"
+              aria-live="polite"
+            >
+              Loading agents…
+            </p>
+          ) : (
+            <div className="space-y-2 max-h-[60vh] overflow-y-auto overscroll-contain">
+              {agents?.length === 0 && (
+                <p className="text-sm text-on-surface-variant py-4 text-center">
+                  No agents available
                 </p>
-              ) : (
-                <div className="space-y-2">
-                  {agents?.map((agent) => (
-                    <button
-                      key={agent.name}
-                      type="button"
-                      onClick={() => handleSelectAgent(agent.name)}
-                      disabled={createThread.isPending}
-                      className="w-full text-left p-3 rounded-lg hover:bg-surface-container-low transition-colors"
-                    >
-                      <span className="block font-medium text-sm">
-                        {agent.name}
-                      </span>
-                      <span className="block text-xs text-on-surface-variant">
-                        {agent.model}
-                      </span>
-                    </button>
-                  ))}
-                </div>
               )}
+              {agents?.map((agent) => (
+                <button
+                  key={agent.name}
+                  type="button"
+                  onClick={() => handleSelectAgent(agent.name)}
+                  disabled={createThread.isPending}
+                  className="w-full text-left p-3 rounded-lg hover:bg-surface-container-low transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-brand focus-visible:ring-offset-2 disabled:opacity-50"
+                >
+                  <span className="block font-medium text-sm">{agent.name}</span>
+                  <span className="block text-xs text-on-surface-variant">
+                    {agent.model}
+                  </span>
+                </button>
+              ))}
             </div>
-          </div>
-        </div>
-      )}
+          )}
+        </DialogContent>
+      </Dialog>
     </aside>
   );
-}
+}
\ No newline at end of file
diff --git a/src/application/components/layout/TopNav.tsx b/src/application/components/layout/TopNav.tsx
index 1ed5827..d8d5ed5 100644
--- a/src/application/components/layout/TopNav.tsx
+++ b/src/application/components/layout/TopNav.tsx
@@ -1,3 +1,4 @@
+import { useState } from "react";
 import { NavLink } from "react-router-dom";
 import { cn } from "@/application/lib/utils";
 
@@ -8,26 +9,37 @@ const NAV_LINKS = [
 ] as const;
 
 export default function TopNav() {
+  const [mobileNavOpen, setMobileNavOpen] = useState(false);
+
   return (
-    <header className="bg-slate-50/80 backdrop-blur-xl sticky top-0 z-50 shadow-sm px-8 py-4">
-      <div className="flex items-center justify-between max-w-[1440px] mx-auto">
+    <header className="bg-slate-50/80 backdrop-blur-xl sticky top-0 z-40 shadow-sm px-4 sm:px-8 py-4">
+      <div className="flex items-center justify-between max-w-[1440px] mx-auto gap-4">
         {/* Left: Brand */}
-        <div className="flex items-center gap-3">
-          <img src="/logo.png" alt="Logo" className="h-10 w-auto select-none" />
+        <div className="flex items-center gap-3 shrink-0">
+          <img
+            src="/logo.png"
+            alt="Composables logo"
+            width={40}
+            height={40}
+            className="h-10 w-auto select-none"
+          />
           <span className="font-headline text-xl font-bold text-on-surface tracking-tight select-none">
             Composables
           </span>
         </div>
 
-        {/* Center: Navigation */}
-        <nav className="flex items-center gap-8">
+        {/* Center: Navigation (desktop) */}
+        <nav
+          className="hidden md:flex items-center gap-8"
+          aria-label="Primary navigation"
+        >
           {NAV_LINKS.map((link) => (
             <NavLink
               key={link.to}
               to={link.to}
               className={({ isActive }) =>
                 cn(
-                  "font-headline text-sm font-semibold uppercase tracking-widest pb-1 transition-colors duration-200",
+                  "font-headline text-sm font-semibold uppercase tracking-widest pb-1 transition-colors duration-200 rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-brand focus-visible:ring-offset-2",
                   isActive
                     ? "text-secondary-brand border-b-2 border-secondary-brand"
                     : "text-slate-500 hover:text-on-surface",
@@ -40,25 +52,77 @@ export default function TopNav() {
         </nav>
 
         {/* Right: Actions */}
-        <div className="flex items-center gap-3">
+        <div className="flex items-center gap-2 shrink-0">
           <button
             type="button"
-            className="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-container transition-colors"
+            aria-label="Settings"
+            className="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-container transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-brand focus-visible:ring-offset-2"
           >
-            <span className="material-symbols-outlined text-on-surface-variant text-xl">
+            <span
+              className="material-symbols-outlined text-on-surface-variant text-xl"
+              aria-hidden="true"
+            >
               settings
             </span>
           </button>
           <button
             type="button"
-            className="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-container transition-colors"
+            aria-label="Account"
+            className="w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-container transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-brand focus-visible:ring-offset-2"
           >
-            <span className="material-symbols-outlined text-on-surface-variant text-xl">
+            <span
+              className="material-symbols-outlined text-on-surface-variant text-xl"
+              aria-hidden="true"
+            >
               account_circle
             </span>
           </button>
+
+          {/* Mobile nav toggle */}
+          <button
+            type="button"
+            aria-label={mobileNavOpen ? "Close menu" : "Open menu"}
+            aria-expanded={mobileNavOpen}
+            aria-controls="mobile-nav"
+            onClick={() => setMobileNavOpen((v) => !v)}
+            className="md:hidden w-10 h-10 flex items-center justify-center rounded-full hover:bg-surface-container transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-brand focus-visible:ring-offset-2"
+          >
+            <span
+              className="material-symbols-outlined text-on-surface-variant text-xl"
+              aria-hidden="true"
+            >
+              {mobileNavOpen ? "close" : "menu"}
+            </span>
+          </button>
         </div>
       </div>
+
+      {/* Mobile navigation drawer */}
+      {mobileNavOpen && (
+        <nav
+          id="mobile-nav"
+          aria-label="Mobile navigation"
+          className="md:hidden mt-4 flex flex-col gap-1 pt-2 border-t border-outline-variant/30"
+        >
+          {NAV_LINKS.map((link) => (
+            <NavLink
+              key={link.to}
+              to={link.to}
+              onClick={() => setMobileNavOpen(false)}
+              className={({ isActive }) =>
+                cn(
+                  "font-headline text-sm font-semibold uppercase tracking-widest py-3 px-2 rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-brand focus-visible:ring-offset-2",
+                  isActive
+                    ? "text-secondary-brand bg-secondary-brand/5"
+                    : "text-slate-500 hover:text-on-surface hover:bg-surface-container-low",
+                )
+              }
+            >
+              {link.label}
+            </NavLink>
+          ))}
+        </nav>
+      )}
     </header>
   );
-}
+}
\ No newline at end of file
diff --git a/src/application/components/rag/BreadcrumbBar.tsx b/src/application/components/rag/BreadcrumbBar.tsx
index e7accea..693cd76 100644
--- a/src/application/components/rag/BreadcrumbBar.tsx
+++ b/src/application/components/rag/BreadcrumbBar.tsx
@@ -9,45 +9,56 @@ export default function BreadcrumbBar({
 }: Readonly<BreadcrumbBarProps>) {
   return (
     <nav
-      className="flex items-center gap-2 text-sm text-on-surface-variant mb-6"
+      className="flex items-center gap-2 text-sm text-on-surface-variant mb-6 flex-wrap"
       aria-label="Breadcrumb"
     >
       <button
         type="button"
         onClick={() => onNavigate(-1)}
         aria-label="Home"
-        className="flex items-center justify-center w-8 h-8 rounded-lg hover:bg-surface-container transition-colors"
+        className="flex items-center justify-center w-8 h-8 rounded-lg hover:bg-surface-container transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-brand focus-visible:ring-inset"
       >
-        <span className="material-symbols-outlined text-lg" aria-hidden="true">
+        <span
+          className="material-symbols-outlined text-lg"
+          aria-hidden="true"
+        >
           home
         </span>
       </button>
-      {segments.map((segment, index) => {
-        const isLast = index === segments.length - 1;
-        return (
-          <div key={`${segment}-${index}`} className="flex items-center gap-2">
-            <span
-              className="material-symbols-outlined text-xs text-outline"
-              aria-hidden="true"
+      <ol className="flex items-center gap-2 flex-wrap min-w-0">
+        {segments.map((segment, index) => {
+          const isLast = index === segments.length - 1;
+          return (
+            <li
+              key={`${segment}-${index}`}
+              className="flex items-center gap-2 min-w-0"
             >
-              chevron_right
-            </span>
-            {isLast ? (
-              <span className="font-headline text-sm font-semibold text-on-surface">
-                {segment}
-              </span>
-            ) : (
-              <button
-                type="button"
-                onClick={() => onNavigate(index)}
-                className="font-headline text-sm text-secondary-brand hover:opacity-80 transition-opacity"
+              <span
+                className="material-symbols-outlined text-xs text-outline"
+                aria-hidden="true"
               >
-                {segment}
-              </button>
-            )}
-          </div>
-        );
-      })}
+                chevron_right
+              </span>
+              {isLast ? (
+                <span
+                  aria-current="page"
+                  className="font-headline text-sm font-semibold text-on-surface truncate"
+                >
+                  {segment}
+                </span>
+              ) : (
+                <button
+                  type="button"
+                  onClick={() => onNavigate(index)}
+                  className="font-headline text-sm text-secondary-brand hover:opacity-80 transition-opacity focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-brand focus-visible:ring-inset rounded"
+                >
+                  {segment}
+                </button>
+              )}
+            </li>
+          );
+        })}
+      </ol>
     </nav>
   );
-}
+}
\ No newline at end of file
diff --git a/src/application/components/rag/FileContentPanel.tsx b/src/application/components/rag/FileContentPanel.tsx
index 93ed5d6..d9dd3d9 100644
--- a/src/application/components/rag/FileContentPanel.tsx
+++ b/src/application/components/rag/FileContentPanel.tsx
@@ -1,3 +1,12 @@
+import { useEffect, useRef } from "react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/application/components/ui/dialog";
+
 interface FileContentPanelProps {
   content: string;
   metadata: { format_type: string; mime_type: string };
@@ -11,84 +20,97 @@ export default function FileContentPanel({
   tables,
   onClose,
 }: Readonly<FileContentPanelProps>) {
+  const tablesRef = useRef<HTMLDivElement>(null);
+
+  // Close on Escape is handled by Dialog primitives automatically.
+  useEffect(() => {
+    function handleEscape(e: KeyboardEvent) {
+      if (e.key === "Escape") onClose();
+    }
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [onClose]);
+
   return (
-    <div className="fixed right-0 top-0 h-full w-[480px] bg-surface-container-lowest border-l border-outline-variant shadow-2xl z-50 flex flex-col">
-      <div className="flex items-center justify-between px-6 py-4 border-b border-outline-variant">
-        <h3 className="font-headline text-sm font-semibold text-on-surface">
-          File Content
-        </h3>
-        <button
-          type="button"
-          onClick={onClose}
-          className="flex items-center justify-center w-8 h-8 rounded-lg hover:bg-surface-container transition-colors"
-          aria-label="Close"
-        >
-          <span className="material-symbols-outlined text-lg text-on-surface-variant">
-            close
-          </span>
-        </button>
-      </div>
+    <Dialog open onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="max-w-3xl w-full sm:w-[480px] sm:max-w-[640px] lg:w-[640px] max-h-[90vh] flex flex-col overflow-hidden p-0">
+        <DialogHeader className="px-6 py-4 border-b border-outline-variant space-y-1.5">
+          <DialogTitle className="font-headline text-sm font-semibold text-on-surface">
+            File Content
+          </DialogTitle>
+          <DialogDescription className="sr-only">
+            Preview of file content and extracted tables
+          </DialogDescription>
+        </DialogHeader>
 
-      <div className="px-6 py-3 border-b border-outline-variant">
-        <div className="flex items-center gap-4 text-xs font-body text-on-surface-variant">
-          <span className="bg-surface-container px-2 py-0.5 rounded">
-            {metadata.format_type}
-          </span>
-          <span>{metadata.mime_type}</span>
+        {/* Metadata bar */}
+        <div className="px-6 py-3 border-b border-outline-variant">
+          <div className="flex items-center gap-4 text-xs font-body text-on-surface-variant">
+            <span className="bg-surface-container px-2 py-0.5 rounded">
+              {metadata.format_type}
+            </span>
+            <span className="break-all">{metadata.mime_type}</span>
+          </div>
         </div>
-      </div>
 
-      <div className="flex-1 overflow-y-auto px-6 py-4 max-h-[calc(100vh-8rem)]">
-        <pre className="font-body text-sm text-on-surface whitespace-pre-wrap overflow-wrap-anywhere">
-          {content}
-        </pre>
+        {/* Body (scrollable) */}
+        <div
+          ref={tablesRef}
+          className="flex-1 overflow-y-auto px-6 py-4 overscroll-contain"
+        >
+          <pre className="font-body text-sm text-on-surface whitespace-pre-wrap overflow-wrap-anywhere">
+            {content}
+          </pre>
 
-        {tables.length > 0 && (
-          <div className="mt-6 space-y-4">
-            <h4 className="font-headline text-sm font-semibold text-on-surface">
-              Tables ({tables.length})
-            </h4>
-            {tables.map((table, tableIdx) => (
-              <div
-                key={`table-${tableIdx}-${table.headers.join("-")}`}
-                className="overflow-x-auto border border-outline-variant rounded-lg"
-              >
-                <table className="min-w-full text-xs font-body">
-                  <thead>
-                    <tr className="bg-surface-container">
-                      {table.headers.map((header) => (
-                        <th
-                          key={header}
-                          className="px-3 py-2 text-left text-on-surface-variant font-semibold"
-                        >
-                          {header}
-                        </th>
-                      ))}
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {table.rows.map((row, rowIdx) => (
-                      <tr
-                        key={`row-${tableIdx}-${rowIdx}`}
-                        className="border-t border-outline-variant"
-                      >
-                        {row.map((cell, cellIdx) => (
-                          <td
-                            key={`cell-${tableIdx}-${rowIdx}-${cellIdx}`}
-                            className="px-3 py-2 text-on-surface"
+          {tables.length > 0 && (
+            <div className="mt-6 space-y-4">
+              <h4 className="font-headline text-sm font-semibold text-on-surface">
+                Tables ({tables.length})
+              </h4>
+              {tables.map((table, tableIdx) => (
+                <div
+                  key={`table-${tableIdx}-${table.headers.join("-")}`}
+                  className="overflow-x-auto border border-outline-variant rounded-lg"
+                >
+                  <table className="min-w-full text-xs font-body">
+                    <thead>
+                      <tr className="bg-surface-container">
+                        {table.headers.map((header) => (
+                          <th
+                            key={header}
+                            scope="col"
+                            className="px-3 py-2 text-left text-on-surface-variant font-semibold"
                           >
-                            {cell}
-                          </td>
+                            {header}
+                          </th>
                         ))}
                       </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-            ))}
-          </div>
-        )}
-      </div>
-    </div>
+                    </thead>
+                    <tbody>
+                      {table.rows.map((row, rowIdx) => (
+                        <tr
+                          key={`row-${tableIdx}-${rowIdx}`}
+                          className="border-t border-outline-variant"
+                        >
+                          {row.map((cell, cellIdx) => (
+                            <td
+                              key={`cell-${tableIdx}-${rowIdx}-${cellIdx}`}
+                              className="px-3 py-2 text-on-surface"
+                            >
+                              {cell}
+                            </td>
+                          ))}
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        </DialogContent>
+    </Dialog>
   );
 }
\ No newline at end of file
diff --git a/src/application/components/rag/IndexActionMenu.tsx b/src/application/components/rag/IndexActionMenu.tsx
index b13498a..d66b01b 100644
--- a/src/application/components/rag/IndexActionMenu.tsx
+++ b/src/application/components/rag/IndexActionMenu.tsx
@@ -1,54 +1,149 @@
-import { useState } from "react";
+import { useState, useRef, useEffect, type KeyboardEvent } from "react";
 
 interface IndexActionMenuProps {
   onIndexLightRAG: () => void;
   onIndexClassical: () => void;
 }
 
+const MENU_ITEMS = [
+  {
+    key: "lightrag",
+    label: "Index with LightRAG",
+    icon: "hub",
+    iconClass: "text-secondary-brand",
+  },
+  {
+    key: "classical",
+    label: "Index with Classical",
+    icon: "search",
+    iconClass: "text-on-surface-variant",
+  },
+] as const;
+
 export default function IndexActionMenu({
   onIndexLightRAG,
   onIndexClassical,
 }: Readonly<IndexActionMenuProps>) {
   const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);
+
+  // Close on outside click.
+  useEffect(() => {
+    if (!open) return;
+
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(event.target as Node)
+      ) {
+        setOpen(false);
+      }
+    }
+
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [open]);
+
+  // When opening the menu, focus the first item after paint.
+  // Avoid setting state synchronously in the body of an effect to prevent cascading renders.
+  useEffect(() => {
+    if (!open) return;
+    const timer = setTimeout(() => itemRefs.current[0]?.focus(), 0);
+    return () => clearTimeout(timer);
+  }, [open]);
+
+  function toggleMenu(nextOpen: boolean) {
+    if (!nextOpen) setActiveIndex(0);
+    setOpen(nextOpen);
+  }
+
+  function handleTriggerKey(e: KeyboardEvent<HTMLButtonElement>) {
+    if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      toggleMenu(true);
+    }
+  }
+
+  function handleItemKey(e: KeyboardEvent<HTMLButtonElement>, idx: number) {
+    const lastIdx = MENU_ITEMS.length - 1;
+    if (e.key === "Escape") {
+      e.preventDefault();
+      setOpen(false);
+      buttonRef.current?.focus();
+      return;
+    }
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      const next = idx === lastIdx ? 0 : idx + 1;
+      setActiveIndex(next);
+      itemRefs.current[next]?.focus();
+      return;
+    }
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      const prev = idx === 0 ? lastIdx : idx - 1;
+      setActiveIndex(prev);
+      itemRefs.current[prev]?.focus();
+    }
+  }
+
+  function runAction(key: string) {
+    if (key === "lightrag") onIndexLightRAG();
+    if (key === "classical") onIndexClassical();
+    toggleMenu(false);
+    buttonRef.current?.focus();
+  }
 
   return (
-    <div className="relative inline-block">
+    <div className="relative inline-block" ref={containerRef}>
       <button
+        ref={buttonRef}
         type="button"
-        className="flex items-center justify-center w-8 h-8 rounded-lg hover:bg-surface-container transition-colors"
+        className="flex items-center justify-center w-8 h-8 rounded-lg hover:bg-surface-container transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-brand focus-visible:ring-offset-2"
         aria-label="Index options"
+        aria-haspopup="menu"
         aria-expanded={open}
-        onClick={() => setOpen(!open)}
+        onClick={() => toggleMenu(!open)}
+        onKeyDown={handleTriggerKey}
       >
-        <span className="material-symbols-outlined text-lg text-on-surface-variant">
+        <span
+          className="material-symbols-outlined text-lg text-on-surface-variant"
+          aria-hidden="true"
+        >
           playlist_add
         </span>
       </button>
 
       {open && (
-        <div className="absolute right-0 top-full mt-1 z-50 bg-surface-container-lowest border border-outline-variant rounded-lg shadow-lg min-w-[200px]">
-          <button
-            type="button"
-            className="flex items-center gap-2 w-full px-3 py-2.5 font-body text-sm text-on-surface hover:bg-surface-container transition-colors"
-            onClick={() => {
-              onIndexLightRAG();
-              setOpen(false);
-            }}
-          >
-            <span className="material-symbols-outlined text-base text-secondary-brand" aria-hidden="true">hub</span>
-            {"Index with LightRAG"}
-          </button>
-          <button
-            type="button"
-            className="flex items-center gap-2 w-full px-3 py-2.5 font-body text-sm text-on-surface hover:bg-surface-container transition-colors"
-            onClick={() => {
-              onIndexClassical();
-              setOpen(false);
-            }}
-          >
-            <span className="material-symbols-outlined text-base text-on-surface-variant" aria-hidden="true">search</span>
-            {"Index with Classical"}
-          </button>
+        <div
+          role="menu"
+          aria-label="Index options"
+          className="absolute right-0 top-full mt-1 z-50 bg-surface-container-lowest border border-outline-variant rounded-lg shadow-lg min-w-[200px] py-1"
+        >
+          {MENU_ITEMS.map((item, idx) => (
+            <button
+              key={item.key}
+              ref={(el) => void (itemRefs.current[idx] = el)}
+              type="button"
+              role="menuitem"
+              aria-current={activeIndex === idx}
+              tabIndex={activeIndex === idx ? 0 : -1}
+              className="flex items-center gap-2 w-full px-3 py-2.5 font-body text-sm text-on-surface hover:bg-surface-container transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-secondary-brand"
+              onClick={() => runAction(item.key)}
+              onKeyDown={(e) => handleItemKey(e, idx)}
+            >
+              <span
+                className={`material-symbols-outlined text-base ${item.iconClass}`}
+                aria-hidden="true"
+              >
+                {item.icon}
+              </span>
+              {item.label}
+            </button>
+          ))}
         </div>
       )}
     </div>
diff --git a/src/application/components/rag/PipelineToggle.tsx b/src/application/components/rag/PipelineToggle.tsx
index aef851a..fe5f347 100644
--- a/src/application/components/rag/PipelineToggle.tsx
+++ b/src/application/components/rag/PipelineToggle.tsx
@@ -1,35 +1,29 @@
+import SegmentedToggle from "@/application/components/shared/SegmentedToggle";
+
+type Pipeline = "lightrag" | "classical";
+
 interface PipelineToggleProps {
-  value: "lightrag" | "classical";
-  onChange: (value: "lightrag" | "classical") => void;
+  value: Pipeline;
+  onChange: (value: Pipeline) => void;
 }
 
-export default function PipelineToggle({ value, onChange }: Readonly<PipelineToggleProps>) {
+const PIPELINE_OPTIONS = [
+  { value: "lightrag" as const, label: "LightRAG" },
+  { value: "classical" as const, label: "Classical" },
+];
+
+export default function PipelineToggle({
+  value,
+  onChange,
+}: Readonly<PipelineToggleProps>) {
   return (
-    <div className="flex items-center gap-1 bg-surface-container rounded-lg p-1">
-        <button
-        type="button"
-        aria-pressed={value === "lightrag"}
-        onClick={() => onChange("lightrag")}
-        className={`px-4 py-2 rounded-md font-headline text-xs font-semibold transition-colors ${
-          value === "lightrag"
-            ? "bg-surface-container-lowest text-on-surface shadow-sm"
-            : "text-on-surface-variant hover:text-on-surface"
-        }`}
-      >
-        LightRAG
-      </button>
-      <button
-        type="button"
-        aria-pressed={value === "classical"}
-        onClick={() => onChange("classical")}
-        className={`px-4 py-2 rounded-md font-headline text-xs font-semibold transition-colors ${
-          value === "classical"
-            ? "bg-surface-container-lowest text-on-surface shadow-sm"
-            : "text-on-surface-variant hover:text-on-surface"
-        }`}
-      >
-        Classical
-      </button>
-    </div>
+    <SegmentedToggle
+      value={value}
+      options={PIPELINE_OPTIONS}
+      onChange={onChange}
+      pattern="toggle"
+      ariaLabel="RAG pipeline selector"
+      itemClassName="px-4 text-xs"
+    />
   );
 }
\ No newline at end of file
diff --git a/src/application/components/rag/RagTabBar.tsx b/src/application/components/rag/RagTabBar.tsx
index aaf0b8e..5a0f18d 100644
--- a/src/application/components/rag/RagTabBar.tsx
+++ b/src/application/components/rag/RagTabBar.tsx
@@ -1,36 +1,26 @@
+import SegmentedToggle from "@/application/components/shared/SegmentedToggle";
+
 interface RagTabBarProps {
   activeTab: "browse" | "query";
   onTabChange: (tab: "browse" | "query") => void;
 }
 
-const tabs = [
+const TAB_OPTIONS = [
   { value: "browse" as const, label: "Browse" },
   { value: "query" as const, label: "Query" },
 ];
 
-export default function RagTabBar({ activeTab, onTabChange }: Readonly<RagTabBarProps>) {
+export default function RagTabBar({
+  activeTab,
+  onTabChange,
+}: Readonly<RagTabBarProps>) {
   return (
-    <div className="flex items-center gap-1 bg-surface-container rounded-lg p-1">
-      {tabs.map((tab) => (
-        <button
-          key={tab.value}
-          type="button"
-          role="tab"
-          aria-selected={activeTab === tab.value}
-          onClick={() => {
-            if (activeTab !== tab.value) {
-              onTabChange(tab.value);
-            }
-          }}
-          className={`px-6 py-2 rounded-md font-headline text-sm font-semibold transition-colors ${
-            activeTab === tab.value
-              ? "bg-surface-container-lowest text-on-surface shadow-sm"
-              : "text-on-surface-variant hover:text-on-surface"
-          }`}
-        >
-          {tab.label}
-        </button>
-      ))}
-    </div>
+    <SegmentedToggle
+      value={activeTab}
+      options={TAB_OPTIONS}
+      onChange={onTabChange}
+      pattern="tab"
+      ariaLabel="RAG view tabs"
+    />
   );
 }
\ No newline at end of file
diff --git a/src/application/components/rag/WorkspaceSelector.tsx b/src/application/components/rag/WorkspaceSelector.tsx
index 5739498..ec50b3f 100644
--- a/src/application/components/rag/WorkspaceSelector.tsx
+++ b/src/application/components/rag/WorkspaceSelector.tsx
@@ -1,4 +1,4 @@
-import { useState, useRef, useEffect } from "react";
+import { useState, useRef, useEffect, type KeyboardEvent } from "react";
 
 interface WorkspaceSelectorProps {
   value: string;
@@ -6,6 +6,8 @@ interface WorkspaceSelectorProps {
   folders: string[];
 }
 
+const NO_MATCH_THRESHOLD = 0;
+
 export default function WorkspaceSelector({
   value,
   onChange,
@@ -13,60 +15,140 @@ export default function WorkspaceSelector({
 }: Readonly<WorkspaceSelectorProps>) {
   const [showSuggestions, setShowSuggestions] = useState(false);
   const [inputValue, setInputValue] = useState(value);
+  const [activeIndex, setActiveIndex] = useState(-1);
   const containerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const listRef = useRef<HTMLUListElement>(null);
+  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);
+
+  // Keep internal input in sync if the parent updates the value.
+  useEffect(() => {
+    setInputValue(value);
+  }, [value]);
 
   const filteredSuggestions = folders.filter(
     (f) => f !== value && (inputValue === "" || f.startsWith(inputValue)),
   );
 
+  // Close on outside click.
   useEffect(() => {
+    if (!showSuggestions) return;
+
     function handleClickOutside(event: MouseEvent) {
-      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+      if (
+        containerRef.current &&
+        !containerRef.current.contains(event.target as Node)
+      ) {
         setShowSuggestions(false);
       }
     }
 
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
+  }, [showSuggestions]);
+
+  function commitSelection(folder: string) {
+    setInputValue(folder);
+    onChange(folder);
+    setShowSuggestions(false);
+    setActiveIndex(-1);
+    inputRef.current?.focus();
+  }
+
+  function handleKeyDown(e: KeyboardEvent<HTMLInputElement>) {
+    const count = filteredSuggestions.length;
+    if (!showSuggestions || count === NO_MATCH_THRESHOLD) return;
+
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActiveIndex((prev) => (prev === count - 1 ? NO_MATCH_THRESHOLD : prev + 1));
+      // Defer focus until refs are updated for the new active index.
+      requestAnimationFrame(() => {
+        const nextIdx = activeIndex + 1 > count - 1 ? NO_MATCH_THRESHOLD : activeIndex + 1;
+        itemRefs.current[nextIdx]?.focus();
+      });
+      return;
+    }
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActiveIndex((prev) => (prev <= NO_MATCH_THRESHOLD ? count - 1 : prev - 1));
+      requestAnimationFrame(() => {
+        const prevIdx = activeIndex <= NO_MATCH_THRESHOLD ? count - 1 : activeIndex - 1;
+        itemRefs.current[prevIdx]?.focus();
+      });
+      return;
+    }
+    if (e.key === "Enter") {
+      if (activeIndex >= NO_MATCH_THRESHOLD && activeIndex < count) {
+        e.preventDefault();
+        commitSelection(filteredSuggestions[activeIndex]);
+        return;
+      }
+      setShowSuggestions(false);
+      return;
+    }
+    if (e.key === "Escape") {
+      setShowSuggestions(false);
+      setActiveIndex(-1);
+      inputRef.current?.focus();
+    }
+  }
+
+  const labelId = "workspace-label";
+  const listboxId = "workspace-listbox";
 
   return (
     <div className="relative" ref={containerRef}>
       <div className="flex items-center gap-2">
         <span
+          id={labelId}
           className="material-symbols-outlined text-lg text-on-surface-variant"
           aria-hidden="true"
         >
           folder_open
         </span>
         <input
+          ref={inputRef}
           type="text"
+          role="combobox"
+          aria-expanded={showSuggestions && filteredSuggestions.length > 0}
+          aria-controls={listboxId}
+          aria-autocomplete="list"
+          aria-labelledby={labelId}
+          aria-label="Workspace (working directory)"
           value={inputValue}
           onChange={(e) => {
             setInputValue(e.target.value);
             onChange(e.target.value);
             setShowSuggestions(true);
+            setActiveIndex(-1);
           }}
           onFocus={() => setShowSuggestions(true)}
-          placeholder="Select or type workspace..."
+          onKeyDown={handleKeyDown}
+          placeholder="Select or type workspace…"
+          autoComplete="off"
+          spellCheck={false}
           className="bg-surface-container-lowest border border-outline-variant rounded-md px-3 py-1.5 font-body text-sm text-on-surface w-64 focus:outline-none focus:ring-2 focus:ring-secondary-brand"
-          aria-label="Workspace (working directory)"
         />
       </div>
 
       {showSuggestions && filteredSuggestions.length > 0 && (
-        <ul className="absolute top-full left-9 z-10 mt-1 w-64 bg-surface-container-lowest border border-outline-variant rounded-md shadow-lg max-h-48 overflow-auto">
-          {filteredSuggestions.map((folder) => (
-            <li key={folder}>
+        <ul
+          ref={listRef}
+          id={listboxId}
+          role="listbox"
+          className="absolute top-full left-9 z-10 mt-1 w-64 bg-surface-container-lowest border border-outline-variant rounded-md shadow-lg max-h-48 overflow-auto"
+        >
+          {filteredSuggestions.map((folder, idx) => (
+            <li key={folder} role="option" aria-selected={idx === activeIndex}>
               <button
+                ref={(el) => void (itemRefs.current[idx] = el)}
                 type="button"
-                className="w-full text-left px-3 py-2 font-body text-sm text-on-surface hover:bg-surface-container transition-colors"
+                tabIndex={idx === activeIndex ? 0 : -1}
+                className="w-full text-left px-3 py-2 font-body text-sm text-on-surface hover:bg-surface-container focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-secondary-brand transition-colors"
                 onMouseDown={(e) => e.preventDefault()}
-                onClick={() => {
-                  setInputValue(folder);
-                  onChange(folder);
-                  setShowSuggestions(false);
-                }}
+                onMouseEnter={() => setActiveIndex(idx)}
+                onClick={() => commitSelection(folder)}
               >
                 {folder}
               </button>
diff --git a/src/application/components/shared/SegmentedToggle.tsx b/src/application/components/shared/SegmentedToggle.tsx
new file mode 100644
index 0000000..33dd8fa
--- /dev/null
+++ b/src/application/components/shared/SegmentedToggle.tsx
@@ -0,0 +1,83 @@
+import { cn } from "@/application/lib/utils";
+
+export interface SegmentedToggleOption<V extends string> {
+  value: V;
+  label: string;
+}
+
+type TogglePattern = "tab" | "toggle" | "radio";
+
+interface SegmentedToggleProps<V extends string> {
+  value: V;
+  options: SegmentedToggleOption<V>[];
+  onChange: (value: V) => void;
+  /**
+   * Accessibility pattern to use:
+   * - "tab":    WAI-ARIA tabs pattern — `role="tab"` + `aria-selected` (default, for content panels).
+   * - "toggle": `<button>` with `aria-pressed` (for binary/multi exclusive toggles).
+   * - "radio":  WAI-ARIA radiogroup — `role="radio"` + `aria-checked` (for mutually exclusive choice lists).
+   */
+  pattern?: TogglePattern;
+  ariaLabel?: string;
+  className?: string;
+  itemClassName?: string;
+}
+
+export default function SegmentedToggle<V extends string>({
+  value,
+  options,
+  onChange,
+  pattern = "tab",
+  ariaLabel,
+  className,
+  itemClassName,
+}: Readonly<SegmentedToggleProps<V>>) {
+  const isTab = pattern === "tab";
+  const isRadio = pattern === "radio";
+
+  // Parent role varies by pattern.
+  const parentRole = isTab
+    ? "tablist"
+    : isRadio
+      ? "radiogroup"
+      : undefined;
+
+  return (
+    <div
+      role={parentRole}
+      aria-label={ariaLabel}
+      className={cn(
+        "flex items-center gap-1 bg-surface-container rounded-lg p-1",
+        className,
+      )}
+    >
+      {options.map((opt) => {
+        const selected = opt.value === value;
+        const childRole = isTab ? "tab" : isRadio ? "radio" : undefined;
+        return (
+          <button
+            key={opt.value}
+            type="button"
+            role={childRole}
+            aria-selected={isTab ? selected : undefined}
+            aria-checked={isRadio ? selected : undefined}
+            aria-pressed={!isTab && !isRadio ? selected : undefined}
+            tabIndex={isRadio ? (selected ? 0 : -1) : undefined}
+            onClick={() => {
+              if (!selected) onChange(opt.value);
+            }}
+            className={cn(
+              "px-6 py-2 rounded-md font-headline text-sm font-semibold transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-brand focus-visible:ring-inset",
+              selected
+                ? "bg-surface-container-lowest text-on-surface shadow-sm"
+                : "text-on-surface-variant hover:text-on-surface",
+              itemClassName,
+            )}
+          >
+            {opt.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+}
\ No newline at end of file
diff --git a/src/application/components/shared/StatusBadge.tsx b/src/application/components/shared/StatusBadge.tsx
index 8dc0acf..c248f30 100644
--- a/src/application/components/shared/StatusBadge.tsx
+++ b/src/application/components/shared/StatusBadge.tsx
@@ -2,34 +2,81 @@ import { cn } from "@/application/lib/utils";
 
 interface StatusBadgeProps {
   status: string;
+  className?: string;
 }
 
-function resolveVariant(status: string): {
+type BadgeVariant = {
   bg: string;
   text: string;
-} {
+  label?: string;
+};
+
+function resolveVariant(status: string): BadgeVariant {
   const normalized = status.toLowerCase();
-  if (normalized === "active" || normalized === "completed") {
+
+  if (
+    normalized === "active" ||
+    normalized === "completed" ||
+    normalized === "approved"
+  ) {
     return { bg: "bg-emerald-100", text: "text-emerald-700" };
   }
-  if (normalized === "awaiting_hitl") {
+
+  if (
+    normalized === "awaiting_hitl" ||
+    normalized === "awaiting review" ||
+    normalized === "pending"
+  ) {
     return { bg: "bg-orange-100", text: "text-orange-700" };
   }
-  return { bg: "bg-slate-100", text: "text-slate-600" };
+
+  if (
+    normalized === "streaming" ||
+    normalized === "in_progress" ||
+    normalized === "in progress" ||
+    normalized === "processing"
+  ) {
+    return { bg: "bg-blue-100", text: "text-blue-700" };
+  }
+
+  if (
+    normalized === "rejected" ||
+    normalized === "error" ||
+    normalized === "failed"
+  ) {
+    return { bg: "bg-red-100", text: "text-red-700" };
+  }
+
+  if (normalized === "standby" || normalized === "off") {
+    return { bg: "bg-slate-100", text: "text-slate-500" };
+  }
+
+  return { bg: "bg-surface-container-high", text: "text-on-surface-variant" };
 }
 
-export default function StatusBadge({ status }: Readonly<StatusBadgeProps>) {
+/** Format display label from a raw status string. */
+function formatLabel(status: string): string {
+  return status
+    .replace(/_/g, " ")
+    .replace(/\b\w/g, (m) => m.toUpperCase());
+}
+
+export default function StatusBadge({
+  status,
+  className,
+}: Readonly<StatusBadgeProps>) {
   const { bg, text } = resolveVariant(status);
 
   return (
     <span
       className={cn(
-        "px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-widest select-none",
+        "inline-flex items-center px-2 py-0.5 rounded text-[10px] font-bold uppercase tracking-widest select-none",
         bg,
         text,
+        className,
       )}
     >
-      {status}
+      {formatLabel(status)}
     </span>
   );
-}
+}
\ No newline at end of file
diff --git a/src/application/components/ui/accordion.tsx b/src/application/components/ui/accordion.tsx
index c10e6ed..feb78d3 100644
--- a/src/application/components/ui/accordion.tsx
+++ b/src/application/components/ui/accordion.tsx
@@ -12,7 +12,7 @@ const AccordionItem = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AccordionPrimitive.Item
     ref={ref}
-    className={cn("border-b", className)}
+    className={cn("border-b border-outline-variant/30 last:border-0", className)}
     {...props}
   />
 ))
@@ -26,13 +26,13 @@ const AccordionTrigger = React.forwardRef<
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        "flex flex-1 items-center justify-between py-3.5 px-4 -mx-4 rounded-lg font-medium transition-colors hover:bg-surface-container-low/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-brand focus-visible:ring-inset [&[data-state=open]>svg]:rotate-180",
         className
       )}
       {...props}
     >
       {children}
-      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200 text-on-surface-variant" aria-hidden="true" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ))
@@ -47,7 +47,7 @@ const AccordionContent = React.forwardRef<
     className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
     {...props}
   >
-    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+    <div className={cn("pb-5 pt-3", className)}>{children}</div>
   </AccordionPrimitive.Content>
 ))
 
diff --git a/src/application/components/ui/button.tsx b/src/application/components/ui/button.tsx
index d9dd2de..fbd8761 100644
--- a/src/application/components/ui/button.tsx
+++ b/src/application/components/ui/button.tsx
@@ -5,25 +5,27 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/application/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-xs font-headline font-bold uppercase tracking-widest transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-brand focus-visible:ring-offset-2 focus-visible:ring-offset-surface-container-lowest disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        default:
+          "bg-primary-container text-white hover:opacity-90",
         destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+          "bg-destructive text-white hover:opacity-90",
         outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+          "border border-outline-variant/60 bg-surface-container-lowest text-on-surface hover:bg-surface-container",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
+          "bg-surface-container text-on-surface-variant hover:bg-surface-container-high",
+        ghost:
+          "text-on-surface-variant hover:bg-surface-container hover:text-on-surface",
+        link: "text-secondary-brand underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
+        default: "h-10 px-6 py-2",
+        sm: "h-9 px-4",
+        lg: "h-11 px-8",
+        icon: "h-10 w-10 p-0",
       },
     },
     defaultVariants: {
diff --git a/src/application/components/ui/dialog.tsx b/src/application/components/ui/dialog.tsx
index 22a0a83..db3a5e7 100644
--- a/src/application/components/ui/dialog.tsx
+++ b/src/application/components/ui/dialog.tsx
@@ -19,7 +19,7 @@ const DialogOverlay = React.forwardRef<
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-black/40 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
@@ -36,14 +36,14 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+        "fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-outline-variant/60 bg-surface-container-lowest text-on-surface p-6 shadow-2xl rounded-2xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] overflow-hidden overscroll-contain",
         className
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-        <X className="h-4 w-4" />
+      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-full p-1.5 text-on-surface-variant transition-colors hover:bg-surface-container hover:text-on-surface focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-brand focus-visible:ring-offset-2 focus-visible:ring-offset-surface-container-lowest disabled:pointer-events-none">
+        <X className="h-4 w-4" aria-hidden="true" />
         <span className="sr-only">Close</span>
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
@@ -86,7 +86,7 @@ const DialogTitle = React.forwardRef<
   <DialogPrimitive.Title
     ref={ref}
     className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
+      "font-headline text-xl font-bold leading-tight text-on-surface tracking-tight pr-8",
       className
     )}
     {...props}
@@ -100,7 +100,7 @@ const DialogDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-sm text-on-surface-variant mt-1", className)}
     {...props}
   />
 ))
diff --git a/src/application/components/ui/input.tsx b/src/application/components/ui/input.tsx
index 96b642d..d71b560 100644
--- a/src/application/components/ui/input.tsx
+++ b/src/application/components/ui/input.tsx
@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "flex h-10 w-full rounded-lg border border-outline-variant/60 bg-surface-container-lowest px-3 py-2 text-sm text-on-surface placeholder:text-outline placeholder:text-sm placeholder:end-with-… focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-brand/50 focus-visible:border-secondary-brand/60 transition-colors disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}
diff --git a/src/application/components/ui/select.tsx b/src/application/components/ui/select.tsx
index 722b2a7..eb4ea7c 100644
--- a/src/application/components/ui/select.tsx
+++ b/src/application/components/ui/select.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import * as SelectPrimitive from "@radix-ui/react-select"
-import { Check, ChevronDown, ChevronUp } from "lucide-react"
+import { ChevronDown, ChevronUp } from "lucide-react"
 
 import { cn } from "@/application/lib/utils"
 
@@ -19,14 +19,14 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-10 w-full items-center justify-between rounded-lg border border-outline-variant/60 bg-surface-container-lowest px-3 py-2 text-sm text-on-surface data-[placeholder]:text-outline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-brand/50 focus-visible:border-secondary-brand/60 transition-colors disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className
     )}
     {...props}
   >
     {children}
     <SelectPrimitive.Icon asChild>
-      <ChevronDown className="h-4 w-4 opacity-50" />
+      <ChevronDown className="h-4 w-4 opacity-60 text-on-surface-variant" aria-hidden="true" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 ))
@@ -39,12 +39,12 @@ const SelectScrollUpButton = React.forwardRef<
   <SelectPrimitive.ScrollUpButton
     ref={ref}
     className={cn(
-      "flex cursor-default items-center justify-center py-1",
+      "flex cursor-default items-center justify-center py-1 text-on-surface-variant",
       className
     )}
     {...props}
   >
-    <ChevronUp className="h-4 w-4" />
+    <ChevronUp className="h-4 w-4" aria-hidden="true" />
   </SelectPrimitive.ScrollUpButton>
 ))
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
@@ -56,12 +56,12 @@ const SelectScrollDownButton = React.forwardRef<
   <SelectPrimitive.ScrollDownButton
     ref={ref}
     className={cn(
-      "flex cursor-default items-center justify-center py-1",
+      "flex cursor-default items-center justify-center py-1 text-on-surface-variant",
       className
     )}
     {...props}
   >
-    <ChevronDown className="h-4 w-4" />
+    <ChevronDown className="h-4 w-4" aria-hidden="true" />
   </SelectPrimitive.ScrollDownButton>
 ))
 SelectScrollDownButton.displayName =
@@ -75,9 +75,9 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
+        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-hidden rounded-xl border border-outline-variant/60 bg-surface-container-lowest text-on-surface shadow-2xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
         position === "popper" &&
-          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1 w-[var(--radix-select-trigger-width)]",
         className
       )}
       position={position}
@@ -86,9 +86,9 @@ const SelectContent = React.forwardRef<
       <SelectScrollUpButton />
       <SelectPrimitive.Viewport
         className={cn(
-          "p-1",
+          "p-1.5",
           position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+            "w-full min-w-[var(--radix-select-trigger-width)]"
         )}
       >
         {children}
@@ -105,7 +105,10 @@ const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
-    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    className={cn(
+      "py-1.5 pl-3 pr-2 text-[10px] font-bold font-headline uppercase tracking-widest text-on-surface-variant",
+      className
+    )}
     {...props}
   />
 ))
@@ -118,17 +121,21 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "relative flex w-full cursor-default select-none items-center gap-2 rounded-md py-2 pl-3 pr-3 text-sm text-on-surface outline-none transition-colors focus:bg-surface-container-low focus:text-on-surface data-[state=checked]:bg-secondary-brand/5 data-[state=checked]:text-on-surface data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
   >
-    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span className="flex h-4 w-4 shrink-0 items-center justify-center text-secondary-brand">
       <SelectPrimitive.ItemIndicator>
-        <Check className="h-4 w-4" />
+        <span
+          className="material-symbols-outlined text-base font-bold"
+          aria-hidden="true"
+        >
+          check
+        </span>
       </SelectPrimitive.ItemIndicator>
     </span>
-
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>
 ))
@@ -140,7 +147,7 @@ const SelectSeparator = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
-    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    className={cn("-mx-1.5 my-1 h-px bg-outline-variant/30", className)}
     {...props}
   />
 ))
@@ -157,4 +164,4 @@ export {
   SelectSeparator,
   SelectScrollUpButton,
   SelectScrollDownButton,
-}
+}
\ No newline at end of file
diff --git a/src/application/components/ui/textarea.tsx b/src/application/components/ui/textarea.tsx
index 0e15103..7de19b7 100644
--- a/src/application/components/ui/textarea.tsx
+++ b/src/application/components/ui/textarea.tsx
@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<
   return (
     <textarea
       className={cn(
-        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "flex min-h-[80px] w-full rounded-lg border border-outline-variant/60 bg-surface-container-lowest px-3 py-2 text-sm text-on-surface placeholder:text-outline placeholder:text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-brand/50 focus-visible:border-secondary-brand/60 transition-colors disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       ref={ref}
diff --git a/tests/unit/components/agent/AgentConfigViewer.test.tsx b/tests/unit/components/agent/AgentConfigViewer.test.tsx
index 5ba181d..1c715c0 100644
--- a/tests/unit/components/agent/AgentConfigViewer.test.tsx
+++ b/tests/unit/components/agent/AgentConfigViewer.test.tsx
@@ -113,7 +113,7 @@ describe("AgentConfigViewer", () => {
       />,
     );
 
-    expect(screen.getByText("Loading configuration...")).toBeInTheDocument();
+    expect(screen.getByText("Loading configuration…")).toBeInTheDocument();
   });
 
   it("renders model name from config", () => {
@@ -323,9 +323,9 @@ describe("AgentConfigViewer", () => {
       />,
     );
 
-    expect(screen.getByText(/\.\.\.Show more/)).toBeInTheDocument();
-
-    await user.click(screen.getByText(/\.\.\.Show more/));
+    const showMoreBtn = screen.getByRole("button", { name: /show more/i });
+    expect(showMoreBtn).toBeInTheDocument();
+    await user.click(showMoreBtn);
 
     expect(screen.getByText("Show less")).toBeInTheDocument();
   });
diff --git a/tests/unit/components/agent/CreateAgentDialog.test.tsx b/tests/unit/components/agent/CreateAgentDialog.test.tsx
index 0a11fa4..c239adf 100644
--- a/tests/unit/components/agent/CreateAgentDialog.test.tsx
+++ b/tests/unit/components/agent/CreateAgentDialog.test.tsx
@@ -51,7 +51,10 @@ describe("CreateAgentDialog", () => {
       <CreateAgentDialog open={true} onOpenChange={vi.fn()} />,
     );
 
-    expect(screen.getByText("Create Agent")).toBeInTheDocument();
+    // The dialog title is a heading; the visible Submit button also says "Create Agent" so target heading.
+    expect(
+      screen.getByRole("heading", { name: /create agent/i, level: 2 }),
+    ).toBeInTheDocument();
   });
 
   it("has form and yaml tabs", () => {
diff --git a/tests/unit/components/chat/ChatMessage.test.tsx b/tests/unit/components/chat/ChatMessage.test.tsx
index faf34f9..de6af4c 100644
--- a/tests/unit/components/chat/ChatMessage.test.tsx
+++ b/tests/unit/components/chat/ChatMessage.test.tsx
@@ -45,7 +45,7 @@ describe("ChatMessage", () => {
       <ChatMessage message={message} agentName="test-agent" />,
     );
 
-    expect(screen.getByText("awaiting_hitl")).toBeInTheDocument();
+    expect(screen.getByText("Awaiting Hitl")).toBeInTheDocument();
   });
 
   it("renders markdown content for AI messages", () => {
diff --git a/tests/unit/components/layout/ThreadSidebar.test.tsx b/tests/unit/components/layout/ThreadSidebar.test.tsx
index e33c59d..bfc08eb 100644
--- a/tests/unit/components/layout/ThreadSidebar.test.tsx
+++ b/tests/unit/components/layout/ThreadSidebar.test.tsx
@@ -144,7 +144,7 @@ describe("ThreadSidebar", () => {
 
     renderWithProviders(<ThreadSidebar />);
 
-    expect(screen.getByText("Loading threads...")).toBeInTheDocument();
+    expect(screen.getByText("Loading threads…")).toBeInTheDocument();
   });
 
   it("shows loading text while agents are loading in the dialog", async () => {
@@ -154,6 +154,6 @@ describe("ThreadSidebar", () => {
     renderWithProviders(<ThreadSidebar />);
     await user.click(screen.getByRole("button", { name: /new conversation/i }));
 
-    expect(screen.getByText("Loading agents...")).toBeInTheDocument();
+    expect(screen.getByText("Loading agents…")).toBeInTheDocument();
   });
 });
diff --git a/tests/unit/components/rag/IndexActionMenu.test.tsx b/tests/unit/components/rag/IndexActionMenu.test.tsx
index 83a7ebd..23a4410 100644
--- a/tests/unit/components/rag/IndexActionMenu.test.tsx
+++ b/tests/unit/components/rag/IndexActionMenu.test.tsx
@@ -31,10 +31,10 @@ describe("IndexActionMenu", () => {
     await user.click(screen.getByRole("button", { name: /index options/i }));
 
     expect(
-      screen.getByRole("button", { name: /index with lightrag/i }),
+      screen.getByRole("menuitem", { name: /index with lightrag/i }),
     ).toBeInTheDocument();
     expect(
-      screen.getByRole("button", { name: /index with classical/i }),
+      screen.getByRole("menuitem", { name: /index with classical/i }),
     ).toBeInTheDocument();
   });
 
@@ -50,7 +50,9 @@ describe("IndexActionMenu", () => {
     );
 
     await user.click(screen.getByRole("button", { name: /index options/i }));
-    await user.click(screen.getByRole("button", { name: /index with lightrag/i }));
+    await user.click(
+      screen.getByRole("menuitem", { name: /index with lightrag/i }),
+    );
 
     expect(onIndexLightRAG).toHaveBeenCalledOnce();
   });
@@ -67,7 +69,9 @@ describe("IndexActionMenu", () => {
     );
 
     await user.click(screen.getByRole("button", { name: /index options/i }));
-    await user.click(screen.getByRole("button", { name: /index with classical/i }));
+    await user.click(
+      screen.getByRole("menuitem", { name: /index with classical/i }),
+    );
 
     expect(onIndexClassical).toHaveBeenCalledOnce();
   });
diff --git a/tests/unit/components/shared/StatusBadge.test.tsx b/tests/unit/components/shared/StatusBadge.test.tsx
index fef2eab..07d0bbb 100644
--- a/tests/unit/components/shared/StatusBadge.test.tsx
+++ b/tests/unit/components/shared/StatusBadge.test.tsx
@@ -23,7 +23,7 @@ describe("StatusBadge", () => {
   it("applies green classes for 'completed' status", () => {
     renderWithProviders(<StatusBadge status="completed" />);
 
-    const badge = screen.getByText("completed");
+    const badge = screen.getByText("Completed");
     expect(badge).toHaveClass("bg-emerald-100");
     expect(badge).toHaveClass("text-emerald-700");
   });
@@ -31,7 +31,7 @@ describe("StatusBadge", () => {
   it("applies orange classes for 'awaiting_hitl' status", () => {
     renderWithProviders(<StatusBadge status="awaiting_hitl" />);
 
-    const badge = screen.getByText("awaiting_hitl");
+    const badge = screen.getByText("Awaiting Hitl");
     expect(badge).toHaveClass("bg-orange-100");
     expect(badge).toHaveClass("text-orange-700");
   });
@@ -39,8 +39,8 @@ describe("StatusBadge", () => {
   it("applies gray classes for unknown status", () => {
     renderWithProviders(<StatusBadge status="unknown" />);
 
-    const badge = screen.getByText("unknown");
-    expect(badge).toHaveClass("bg-slate-100");
-    expect(badge).toHaveClass("text-slate-600");
+    const badge = screen.getByText("Unknown");
+    expect(badge).toHaveClass("bg-surface-container-high");
+    expect(badge).toHaveClass("text-on-surface-variant");
   });
 });

From 40711e0e621dcf4c6894ba1f775c5dca67797e19 Mon Sep 17 00:00:00 2001
From: Kaiohz <yohan.goncalves@cosigma.io>
Date: Sat, 11 Jul 2026 08:45:49 +0200
Subject: [PATCH 2/3] Add editorconfig and prettierrc; format codebase

Add .editorconfig and .prettierrc to enforce consistent formatting
rules. Reformat all source and test files to comply with the new
config, including print width, single quotes, and trailing commas.
Extract shared form ID constants and export PageFallback for reuse.
---
 .editorconfig                                 |  12 ++
 .prettierrc                                   |   8 +
 src/application/App.tsx                       |  10 +-
 .../components/agent/AgentCard.tsx            |  14 +-
 .../components/agent/AgentConfigForm.tsx      |  59 ++----
 .../components/agent/AgentConfigViewer.tsx    |  78 ++------
 .../components/agent/AgentGrid.tsx            |   9 +-
 .../components/agent/CreateAgentDialog.tsx    |  16 +-
 .../components/agent/HITLEditor.tsx           |  31 +--
 .../components/agent/KeyValueEditor.tsx       |  14 +-
 .../components/agent/McpServerEditor.tsx      |  17 +-
 .../components/agent/ResponseFormatEditor.tsx |  10 +-
 .../components/agent/StringListEditor.tsx     |  18 +-
 .../components/agent/SubAgentEditor.tsx       |   9 +-
 .../components/agent/formConstants.ts         |   2 +
 .../components/chat/ChatMessage.tsx           |  40 +---
 .../components/chat/HITLReviewPanel.tsx       |  13 +-
 .../components/chat/MessageList.tsx           |  34 +---
 .../chat/StructuredResponseCard.tsx           |  20 +-
 .../components/layout/MainLayout.tsx          |   2 +-
 .../components/layout/ThreadSidebar.tsx       |  34 +---
 src/application/components/layout/TopNav.tsx  |   7 +-
 .../components/rag/BreadcrumbBar.tsx          |  22 +--
 .../components/rag/FileContentPanel.tsx       |  14 +-
 src/application/components/rag/FileList.tsx   |  22 ++-
 src/application/components/rag/FileRow.tsx    |  11 +-
 src/application/components/rag/FolderRow.tsx  |  24 ++-
 .../components/rag/IndexActionMenu.tsx        |   7 +-
 .../components/rag/PipelineToggle.tsx         |   7 +-
 .../components/rag/QueryOptions.tsx           |  37 ++--
 src/application/components/rag/QueryPanel.tsx |  25 +--
 .../components/rag/QueryResults.tsx           |  21 +-
 src/application/components/rag/RagTabBar.tsx  |   7 +-
 .../components/rag/UploadButton.tsx           |   5 +-
 .../components/rag/WorkspaceSelector.tsx      |   7 +-
 .../components/shared/SegmentedToggle.tsx     |  13 +-
 .../components/shared/StatusBadge.tsx         |  23 +--
 src/application/components/ui/accordion.tsx   |  31 +--
 src/application/components/ui/badge.tsx       |  22 +--
 src/application/components/ui/button.tsx      |  47 ++---
 src/application/components/ui/dialog.tsx      |  71 +++----
 src/application/components/ui/form.tsx        | 119 ++++++-----
 src/application/components/ui/input.tsx       |  18 +-
 src/application/components/ui/label.tsx       |  27 ++-
 src/application/components/ui/scroll-area.tsx |  24 ++-
 src/application/components/ui/select.tsx      |  67 +++----
 src/application/components/ui/separator.tsx   |  43 ++--
 src/application/components/ui/switch.tsx      |  16 +-
 src/application/components/ui/tabs.tsx        |  30 +--
 src/application/components/ui/textarea.tsx    |  37 ++--
 src/application/hooks/chat/useSendMessage.ts  |   3 +-
 src/application/hooks/chat/useStreamChat.ts   |   7 +-
 .../hooks/rag/useClassicalIndexFile.ts        |   2 +-
 .../hooks/rag/useClassicalIndexFolder.ts      |   2 +-
 src/application/hooks/rag/useIndexFile.ts     |   2 +-
 src/application/hooks/rag/useIndexFolder.ts   |   8 +-
 src/application/hooks/rag/useRagQuery.ts      |   7 +-
 src/application/hooks/rag/useReadFile.ts      |   2 +-
 src/application/lib/formatFileSize.ts         |   3 +-
 src/application/lib/yaml.ts                   |  14 +-
 src/application/pages/AgentsPage.tsx          |  12 +-
 src/application/pages/ChatPage.tsx            |   4 +-
 src/application/pages/RagPage.tsx             |  38 ++--
 src/application/stores/useChatStore.ts        |   9 +-
 .../entities/agent/agentConfigSchema.ts       |  22 ++-
 src/domain/entities/rag/fileContent.ts        |   2 +-
 src/domain/entities/rag/indexingRequest.ts    |   2 +-
 src/domain/entities/rag/queryRequest.ts       |   1 -
 src/domain/ports/rag/ragFileContentPort.ts    |   2 +-
 src/domain/ports/rag/ragIndexPort.ts          |  10 +-
 src/domain/ports/rag/ragQueryPort.ts          |   5 +-
 src/infrastructure/api/agent/agentApi.ts      |  17 +-
 src/infrastructure/api/chat/chatApi.ts        |  12 +-
 .../api/rag/ragFileContentApi.ts              |   2 +-
 src/infrastructure/api/rag/ragIndexApi.ts     |  38 ++--
 tests/fixtures/external.ts                    |  14 +-
 tests/fixtures/rag.ts                         |   8 +-
 tests/unit/application/App.test.tsx           |  40 ++++
 tests/unit/application/lib/yaml.test.ts       |   5 +-
 .../components/agent/AgentConfigForm.test.tsx |  60 ++----
 .../agent/AgentConfigViewer.test.tsx          | 148 ++++----------
 .../unit/components/agent/AgentGrid.test.tsx  |  16 +-
 .../agent/CreateAgentDialog.test.tsx          |  24 +--
 .../components/agent/KeyValueEditor.test.tsx  |   4 +-
 .../components/agent/McpServerEditor.test.tsx |  24 +--
 .../agent/StringListEditor.test.tsx           |   7 +-
 .../components/agent/SubAgentEditor.test.tsx  |  24 +--
 tests/unit/components/chat/ChatInput.test.tsx |  24 +--
 .../unit/components/chat/ChatMessage.test.tsx |  93 +++++++--
 .../components/chat/HITLReviewPanel.test.tsx  |  56 ++----
 .../components/layout/MainLayout.test.tsx     |  95 +++++----
 .../components/layout/ThreadSidebar.test.tsx  |  62 +++---
 .../components/rag/BreadcrumbBar.test.tsx     |  33 +---
 .../components/rag/FileContentPanel.test.tsx  |   6 +-
 tests/unit/components/rag/FileList.test.tsx   |  11 +-
 tests/unit/components/rag/FileRow.test.tsx    |  57 ++----
 tests/unit/components/rag/FolderRow.test.tsx  |  10 +-
 .../components/rag/IndexActionMenu.test.tsx   | 187 ++++++++++++++----
 .../components/rag/PipelineToggle.test.tsx    |  30 +--
 tests/unit/components/rag/QueryPanel.test.tsx |  48 ++---
 .../unit/components/rag/QueryResults.test.tsx |  14 +-
 tests/unit/components/rag/RagTabBar.test.tsx  |  22 +--
 .../unit/components/rag/UploadButton.test.tsx |  35 +---
 .../components/rag/WorkspaceSelector.test.tsx | 105 +++++++++-
 .../shared/SegmentedToggle.test.tsx           | 158 +++++++++++++++
 .../unit/domain/entities/agentConfig.test.ts  |   5 +-
 .../domain/entities/agentConfigSchema.test.ts |   5 +-
 tests/unit/domain/entities/fileEntry.test.ts  |  28 +--
 .../domain/entities/rag/fileContent.test.ts   |  27 +--
 .../entities/rag/indexingRequest.test.ts      |  46 ++---
 .../domain/entities/rag/queryRequest.test.ts  |  42 ++--
 .../unit/hooks/agent/useAgentConfig.test.tsx  |   5 +-
 .../unit/hooks/agent/useCreateAgent.test.tsx  |   5 +-
 .../unit/hooks/agent/useUpdateAgent.test.tsx  |   9 +-
 .../unit/hooks/chat/useCreateThread.test.tsx  |   4 +-
 .../unit/hooks/chat/useDeleteThread.test.tsx  |   4 +-
 tests/unit/hooks/chat/useMessages.test.tsx    |   4 +-
 tests/unit/hooks/chat/useSendMessage.test.tsx |   4 +-
 tests/unit/hooks/chat/useThreads.test.tsx     |   4 +-
 .../hooks/rag/useClassicalIndexFile.test.tsx  |  30 ++-
 .../rag/useClassicalIndexFolder.test.tsx      |  30 ++-
 .../unit/hooks/rag/useClassicalQuery.test.tsx |   6 +-
 tests/unit/hooks/rag/useFiles.test.tsx        |   4 +-
 tests/unit/hooks/rag/useFolders.test.tsx      |   4 +-
 tests/unit/hooks/rag/useIndexFile.test.tsx    |   2 +-
 tests/unit/hooks/rag/useIndexFolder.test.tsx  |   2 +-
 tests/unit/hooks/rag/useRagQuery.test.tsx     |  27 ++-
 tests/unit/hooks/rag/useReadFile.test.tsx     |  18 +-
 .../infrastructure/api/agent/agentApi.test.ts |  12 +-
 .../infrastructure/api/chat/chatApi.test.ts   |  18 +-
 .../infrastructure/api/rag/ragApi.test.ts     |   8 +-
 .../api/rag/ragFileContentApi.test.ts         |  20 +-
 .../api/rag/ragIndexApi.test.ts               |  76 +++----
 .../api/rag/ragQueryApi.test.ts               |  42 ++--
 .../unit/infrastructure/axiosInstance.test.ts |   7 +-
 .../config/fileConfigRepository.test.ts       |   4 +-
 tests/unit/pages/AgentsPage.test.tsx          |  16 +-
 tests/unit/pages/ChatPage.test.tsx            |   8 +-
 tests/unit/pages/RagPage.test.tsx             |  12 +-
 139 files changed, 1566 insertions(+), 1872 deletions(-)
 create mode 100644 .editorconfig
 create mode 100644 .prettierrc
 create mode 100644 src/application/components/agent/formConstants.ts
 create mode 100644 tests/unit/application/App.test.tsx
 create mode 100644 tests/unit/components/shared/SegmentedToggle.test.tsx

diff --git a/.editorconfig b/.editorconfig
new file mode 100644
index 0000000..5cc79a3
--- /dev/null
+++ b/.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
\ No newline at end of file
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..0bf6e04
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "all",
+  "printWidth": 100,
+  "tabWidth": 2,
+  "endOfLine": "lf"
+}
diff --git a/src/application/App.tsx b/src/application/App.tsx
index 4801afa..8c59090 100644
--- a/src/application/App.tsx
+++ b/src/application/App.tsx
@@ -8,16 +8,14 @@ const RagPage = lazy(() => import("@/application/pages/RagPage"));
 
 function PageFallback() {
   return (
-    <div
-      className="flex-1 flex items-center justify-center"
-      role="status"
-      aria-live="polite"
-    >
+    <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 (
     <Routes>
@@ -35,4 +33,4 @@ export default function AppRoot() {
       <App />
     </Suspense>
   );
-}
\ No newline at end of file
+}
diff --git a/src/application/components/agent/AgentCard.tsx b/src/application/components/agent/AgentCard.tsx
index fd318a3..7fe6363 100644
--- a/src/application/components/agent/AgentCard.tsx
+++ b/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>
   );
diff --git a/src/application/components/agent/AgentConfigForm.tsx b/src/application/components/agent/AgentConfigForm.tsx
index 8d77203..21e4de4 100644
--- a/src/application/components/agent/AgentConfigForm.tsx
+++ b/src/application/components/agent/AgentConfigForm.tsx
@@ -31,6 +31,7 @@ import McpServerEditor from "./McpServerEditor";
 import SubAgentEditor from "./SubAgentEditor";
 import HITLEditor from "./HITLEditor";
 import ResponseFormatEditor from "./ResponseFormatEditor";
+import { AGENT_CONFIG_FORM_ID as FORM_ID } from "./formConstants";
 
 // ─── Constants ──────────────────────────────────────────────────────────────
 
@@ -48,10 +49,7 @@ type SectionValue =
 // Only essential sections are open by default, others can be revealed on demand.
 const DEFAULT_OPEN_SECTIONS: SectionValue[] = ["general", "system-prompt"];
 
-const SECTION_META: Record<
-  SectionValue,
-  { label: string; icon: string }
-> = {
+const SECTION_META: Record<SectionValue, { label: string; icon: string }> = {
   general: { label: "General", icon: "tune" },
   "system-prompt": { label: "System Prompt", icon: "description" },
   "tools-middleware": { label: "Tools & Middleware", icon: "build" },
@@ -115,10 +113,7 @@ const DEFAULT_FORM_VALUES: AgentConfigFormData = {
   debug: false,
 };
 
-function getDefaultValues(
-  mode: "create" | "edit",
-  initialData?: AgentConfig,
-): AgentConfigFormData {
+function getDefaultValues(mode: "create" | "edit", initialData?: AgentConfig): AgentConfigFormData {
   if (mode === "edit" && initialData) {
     return {
       ...DEFAULT_FORM_VALUES,
@@ -161,8 +156,6 @@ interface AgentConfigFormProps {
 
 // ─── Component ────────────────────────────────────────────────────────────
 
-const FORM_ID = "agent-config-form";
-
 export default function AgentConfigForm({
   mode,
   initialData,
@@ -236,11 +229,7 @@ export default function AgentConfigForm({
         <AccordionItem value="general">
           <SectionTrigger value="general" />
           <AccordionContent className="space-y-4">
-            <FormField
-              id="agent-name"
-              label="Agent Name"
-              error={errors.name?.message}
-            >
+            <FormField id="agent-name" label="Agent Name" error={errors.name?.message}>
               <Input
                 id="agent-name"
                 {...register("name")}
@@ -250,11 +239,7 @@ export default function AgentConfigForm({
                 aria-invalid={!!errors.name}
               />
             </FormField>
-            <FormField
-              id="model"
-              label="Model"
-              error={errors.model?.message}
-            >
+            <FormField id="model" label="Model" error={errors.model?.message}>
               <Input
                 id="model"
                 {...register("model")}
@@ -321,9 +306,7 @@ export default function AgentConfigForm({
                     <button
                       key={opt.value}
                       type="button"
-                      onClick={() =>
-                        toggleMiddleware(opt.value, !isActive)
-                      }
+                      onClick={() => toggleMiddleware(opt.value, !isActive)}
                       aria-pressed={isActive}
                       className={cn(
                         "px-3 py-1.5 rounded-full text-xs font-bold font-headline uppercase tracking-widest border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-brand focus-visible:ring-inset",
@@ -349,9 +332,7 @@ export default function AgentConfigForm({
               <Label className="text-on-surface text-sm">Type</Label>
               <Select
                 value={backendType}
-                onValueChange={(v) =>
-                  setValue("backend.type", v as BackendType)
-                }
+                onValueChange={(v) => setValue("backend.type", v as BackendType)}
               >
                 <SelectTrigger className="mt-1.5">
                   <SelectValue />
@@ -478,10 +459,7 @@ function SectionTrigger({ value }: Readonly<{ value: SectionValue }>) {
   return (
     <AccordionTrigger className={buildAccordionTriggerClass()}>
       <span className="flex items-center gap-2">
-        <span
-          className="material-symbols-outlined text-sm text-secondary-brand"
-          aria-hidden="true"
-        >
+        <span className="material-symbols-outlined text-sm text-secondary-brand" aria-hidden="true">
           {meta.icon}
         </span>
         {meta.label}
@@ -511,11 +489,7 @@ function FormField({ id, label, error, children }: Readonly<FormFieldProps>) {
         {children}
       </div>
       {error && (
-        <p
-          id={errorId}
-          role="alert"
-          className="text-destructive text-xs mt-1.5"
-        >
+        <p id={errorId} role="alert" className="text-destructive text-xs mt-1.5">
           {error}
         </p>
       )}
@@ -530,20 +504,11 @@ interface AddButtonProps {
 
 function AddButton({ onClick, label }: Readonly<AddButtonProps>) {
   return (
-    <Button
-      type="button"
-      variant="outline"
-      size="sm"
-      onClick={onClick}
-      className="w-full"
-    >
-      <span
-        className="material-symbols-outlined text-sm mr-1"
-        aria-hidden="true"
-      >
+    <Button type="button" variant="outline" size="sm" onClick={onClick} className="w-full">
+      <span className="material-symbols-outlined text-sm mr-1" aria-hidden="true">
         add
       </span>
       {label}
     </Button>
   );
-}
\ No newline at end of file
+}
diff --git a/src/application/components/agent/AgentConfigViewer.tsx b/src/application/components/agent/AgentConfigViewer.tsx
index 0842139..d1f9f15 100644
--- a/src/application/components/agent/AgentConfigViewer.tsx
+++ b/src/application/components/agent/AgentConfigViewer.tsx
@@ -18,6 +18,7 @@ import {
 import { Button } from "@/application/components/ui/button";
 import { ScrollArea } from "@/application/components/ui/scroll-area";
 import AgentConfigForm from "./AgentConfigForm";
+import { AGENT_CONFIG_FORM_ID } from "./formConstants";
 
 interface AgentConfigViewerProps {
   readonly agentName: string;
@@ -137,7 +138,7 @@ export default function AgentConfigViewer({
               <div className="lg:hidden flex items-center gap-3 mt-4 pt-4 border-t border-outline-variant/30">
                 <Button
                   type="submit"
-                  form="agent-config-form"
+                  form={AGENT_CONFIG_FORM_ID}
                   disabled={updateAgent.isPending}
                   className="flex-1"
                 >
@@ -148,10 +149,7 @@ export default function AgentConfigViewer({
           ) : (
             <ScrollArea className="max-h-[70vh]">
               {isLoading && (
-                <p
-                  className="text-on-surface-variant text-sm py-8 text-center"
-                  aria-live="polite"
-                >
+                <p className="text-on-surface-variant text-sm py-8 text-center" aria-live="polite">
                   Loading configuration…
                 </p>
               )}
@@ -168,9 +166,7 @@ export default function AgentConfigViewer({
                   <div className="flex items-center gap-4">
                     <div className="flex-1 min-w-0">
                       <SectionLabel>Model</SectionLabel>
-                      <p className="text-on-surface text-sm font-mono break-all">
-                        {config.model}
-                      </p>
+                      <p className="text-on-surface text-sm font-mono break-all">{config.model}</p>
                     </div>
                     <div>
                       <SectionLabel>Debug</SectionLabel>
@@ -202,9 +198,7 @@ export default function AgentConfigViewer({
                   {/* Tools */}
                   {config.tools.length > 0 && (
                     <div>
-                      <SectionLabel>
-                        Tools ({config.tools.length})
-                      </SectionLabel>
+                      <SectionLabel>Tools ({config.tools.length})</SectionLabel>
                       <div className="flex flex-wrap gap-2">
                         {config.tools.map((tool) => (
                           <ToolTag key={tool} label={tool} />
@@ -216,9 +210,7 @@ export default function AgentConfigViewer({
                   {/* Middleware */}
                   {config.middleware.length > 0 && (
                     <div>
-                      <SectionLabel>
-                        Middleware ({config.middleware.length})
-                      </SectionLabel>
+                      <SectionLabel>Middleware ({config.middleware.length})</SectionLabel>
                       <div className="flex flex-wrap gap-2">
                         {config.middleware.map((mw) => (
                           <ToolTag key={mw} label={mw} />
@@ -231,15 +223,12 @@ export default function AgentConfigViewer({
                   <div>
                     <SectionLabel>Backend</SectionLabel>
                     <p className="text-on-surface text-sm">
-                      Type:{" "}
-                      <span className="font-mono">{config.backend.type}</span>
+                      Type: <span className="font-mono">{config.backend.type}</span>
                       {config.backend.root_dir && (
                         <>
                           {" "}
                           &middot; Root:{" "}
-                          <span className="font-mono">
-                            {config.backend.root_dir}
-                          </span>
+                          <span className="font-mono">{config.backend.root_dir}</span>
                         </>
                       )}
                     </p>
@@ -251,13 +240,8 @@ export default function AgentConfigViewer({
                       <SectionLabel>HITL Rules</SectionLabel>
                       <div className="bg-surface-container-low rounded-xl p-4 space-y-1">
                         {Object.entries(config.hitl.rules).map(([key, value]) => (
-                          <div
-                            key={key}
-                            className="flex items-center justify-between text-xs"
-                          >
-                            <span className="font-mono text-on-surface break-all">
-                              {key}
-                            </span>
+                          <div key={key} className="flex items-center justify-between text-xs">
+                            <span className="font-mono text-on-surface break-all">{key}</span>
                             <span className="text-on-surface-variant ml-3 shrink-0">
                               {(() => {
                                 if (typeof value === "boolean")
@@ -274,9 +258,7 @@ export default function AgentConfigViewer({
                   {/* MCP Servers */}
                   {config.mcp_servers.length > 0 && (
                     <div>
-                      <SectionLabel>
-                        MCP Servers ({config.mcp_servers.length})
-                      </SectionLabel>
+                      <SectionLabel>MCP Servers ({config.mcp_servers.length})</SectionLabel>
                       <div className="space-y-2">
                         {config.mcp_servers.map((server) => (
                           <div
@@ -296,18 +278,11 @@ export default function AgentConfigViewer({
                   {/* Subagents */}
                   {config.subagents.length > 0 && (
                     <div>
-                      <SectionLabel>
-                        Subagents ({config.subagents.length})
-                      </SectionLabel>
+                      <SectionLabel>Subagents ({config.subagents.length})</SectionLabel>
                       <div className="space-y-2">
                         {config.subagents.map((sub) => (
-                          <div
-                            key={sub.name}
-                            className="bg-surface-container-low rounded-xl p-3"
-                          >
-                            <p className="text-sm font-medium text-on-surface">
-                              {sub.name}
-                            </p>
+                          <div key={sub.name} className="bg-surface-container-low rounded-xl p-3">
+                            <p className="text-sm font-medium text-on-surface">{sub.name}</p>
                             <p className="text-xs text-on-surface-variant mt-1">
                               {sub.description}
                             </p>
@@ -326,30 +301,15 @@ export default function AgentConfigViewer({
         {mode === "view" && (
           <div className="shrink-0 px-6 sm:px-8 py-4 border-t border-outline-variant/30 bg-surface-container-lowest">
             <div className="flex items-center gap-3">
-              <Button
-                type="button"
-                variant="outline"
-                onClick={handleExportYaml}
-                disabled={!config}
-              >
-                <span
-                  className="material-symbols-outlined text-sm mr-1"
-                  aria-hidden="true"
-                >
+              <Button type="button" variant="outline" onClick={handleExportYaml} disabled={!config}>
+                <span className="material-symbols-outlined text-sm mr-1" aria-hidden="true">
                   download
                 </span>
                 <span className="hidden sm:inline">Export YAML</span>
                 <span className="sm:hidden">Export</span>
               </Button>
-              <Button
-                type="button"
-                onClick={() => setMode("edit")}
-                disabled={!config}
-              >
-                <span
-                  className="material-symbols-outlined text-sm mr-1"
-                  aria-hidden="true"
-                >
+              <Button type="button" onClick={() => setMode("edit")} disabled={!config}>
+                <span className="material-symbols-outlined text-sm mr-1" aria-hidden="true">
                   edit
                 </span>
                 <span className="hidden sm:inline">Edit</span>
@@ -381,4 +341,4 @@ function SectionLabel({ children }: Readonly<{ children: React.ReactNode }>) {
       {children}
     </h4>
   );
-}
\ No newline at end of file
+}
diff --git a/src/application/components/agent/AgentGrid.tsx b/src/application/components/agent/AgentGrid.tsx
index 1b999c3..8759cfd 100644
--- a/src/application/components/agent/AgentGrid.tsx
+++ b/src/application/components/agent/AgentGrid.tsx
@@ -6,10 +6,7 @@ interface AgentGridProps {
   onConfigure: (name: string) => void;
 }
 
-export default function AgentGrid({
-  onCreateNew,
-  onConfigure,
-}: Readonly<AgentGridProps>) {
+export default function AgentGrid({ onCreateNew, onConfigure }: Readonly<AgentGridProps>) {
   const { data: agents, isLoading, error } = useAgents();
 
   if (isLoading) {
@@ -25,9 +22,7 @@ export default function AgentGrid({
   if (error) {
     return (
       <div className="flex items-center justify-center py-24">
-        <p className="text-red-600 font-headline text-sm">
-          Failed to load agents: {error.message}
-        </p>
+        <p className="text-red-600 font-headline text-sm">Failed to load agents: {error.message}</p>
       </div>
     );
   }
diff --git a/src/application/components/agent/CreateAgentDialog.tsx b/src/application/components/agent/CreateAgentDialog.tsx
index 6ea75f8..f376827 100644
--- a/src/application/components/agent/CreateAgentDialog.tsx
+++ b/src/application/components/agent/CreateAgentDialog.tsx
@@ -13,6 +13,7 @@ import AgentConfigForm from "./AgentConfigForm";
 import type { AgentConfigFormData } from "@/domain/entities/agent/agentConfigSchema";
 import type { AgentConfig } from "@/domain/entities/agent/agentConfig";
 import { agentConfigToYamlFile } from "@/application/lib/yaml";
+import { AGENT_CONFIG_FORM_ID, AGENT_YAML_FORM_ID } from "./formConstants";
 
 interface CreateAgentDialogProps {
   readonly open: boolean;
@@ -103,8 +104,7 @@ export default function CreateAgentDialog({
           <DialogHeader className="space-y-2">
             <DialogTitle className="text-2xl">Create Agent</DialogTitle>
             <DialogDescription>
-              Configure a new agent via form, or upload an existing YAML
-              configuration.
+              Configure a new agent via form, or upload an existing YAML configuration.
             </DialogDescription>
           </DialogHeader>
 
@@ -131,11 +131,7 @@ export default function CreateAgentDialog({
               isPending={createAgent.isPending}
             />
           ) : (
-            <form
-              id="agent-yaml-form"
-              onSubmit={handleYamlSubmit}
-              className="space-y-6"
-            >
+            <form id={AGENT_YAML_FORM_ID} onSubmit={handleYamlSubmit} className="space-y-6">
               <div>
                 <label
                   htmlFor="agent-name"
@@ -187,7 +183,7 @@ export default function CreateAgentDialog({
             // The form triggers its own submit; we use a form attribute to bind.
             <button
               type="submit"
-              form="agent-config-form"
+              form={AGENT_CONFIG_FORM_ID}
               disabled={createAgent.isPending}
               className="flex-1 sm:flex-initial px-6 py-3 rounded-full bg-primary-container text-white font-headline text-xs font-bold uppercase tracking-widest hover:opacity-90 transition-opacity disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-brand focus-visible:ring-offset-2"
             >
@@ -196,7 +192,7 @@ export default function CreateAgentDialog({
           ) : (
             <button
               type="submit"
-              form="agent-yaml-form"
+              form={AGENT_YAML_FORM_ID}
               disabled={createAgent.isPending}
               className="flex-1 sm:flex-initial px-6 py-3 rounded-full bg-primary-container text-white font-headline text-xs font-bold uppercase tracking-widest hover:opacity-90 transition-opacity disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-brand focus-visible:ring-offset-2"
             >
@@ -207,4 +203,4 @@ export default function CreateAgentDialog({
       </DialogContent>
     </Dialog>
   );
-}
\ No newline at end of file
+}
diff --git a/src/application/components/agent/HITLEditor.tsx b/src/application/components/agent/HITLEditor.tsx
index b1000ea..7eef806 100644
--- a/src/application/components/agent/HITLEditor.tsx
+++ b/src/application/components/agent/HITLEditor.tsx
@@ -11,10 +11,7 @@ interface HITLEditorProps {
   onChange: (value: Record<string, RuleValue>) => void;
 }
 
-export default function HITLEditor({
-  value,
-  onChange,
-}: Readonly<HITLEditorProps>) {
+export default function HITLEditor({ value, onChange }: Readonly<HITLEditorProps>) {
   const [ruleName, setRuleName] = useState("");
   const inputId = useId();
   const entries = Object.entries(value);
@@ -67,31 +64,22 @@ export default function HITLEditor({
           {typeof val === "boolean" ? (
             <div className="flex items-center gap-2">
               <Label className="text-xs text-on-surface-variant">Enabled</Label>
-              <Switch
-                checked={val}
-                onCheckedChange={(v) => updateRule(key, v)}
-              />
+              <Switch checked={val} onCheckedChange={(v) => updateRule(key, v)} />
             </div>
           ) : (
             <div className="flex items-center gap-4">
               <div className="flex items-center gap-1">
-                <Label className="text-xs text-on-surface-variant">
-                  Before
-                </Label>
+                <Label className="text-xs text-on-surface-variant">Before</Label>
                 <Switch
                   checked={val.before ?? false}
-                  onCheckedChange={(v) =>
-                    updateRule(key, { ...val, before: v })
-                  }
+                  onCheckedChange={(v) => updateRule(key, { ...val, before: v })}
                 />
               </div>
               <div className="flex items-center gap-1">
                 <Label className="text-xs text-on-surface-variant">After</Label>
                 <Switch
                   checked={val.after ?? false}
-                  onCheckedChange={(v) =>
-                    updateRule(key, { ...val, after: v })
-                  }
+                  onCheckedChange={(v) => updateRule(key, { ...val, after: v })}
                 />
               </div>
             </div>
@@ -102,19 +90,14 @@ export default function HITLEditor({
             className="rounded-full hover:bg-destructive/15 p-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive focus-visible:ring-inset"
             aria-label={`Remove ${key}`}
           >
-            <span
-              className="material-symbols-outlined text-xs"
-              aria-hidden="true"
-            >
+            <span className="material-symbols-outlined text-xs" aria-hidden="true">
               close
             </span>
           </button>
         </div>
       ))}
       {entries.length === 0 && (
-        <p className="text-xs text-on-surface-variant italic">
-          No HITL rules configured
-        </p>
+        <p className="text-xs text-on-surface-variant italic">No HITL rules configured</p>
       )}
     </div>
   );
diff --git a/src/application/components/agent/KeyValueEditor.tsx b/src/application/components/agent/KeyValueEditor.tsx
index 55ce3b6..724c610 100644
--- a/src/application/components/agent/KeyValueEditor.tsx
+++ b/src/application/components/agent/KeyValueEditor.tsx
@@ -42,7 +42,10 @@ export default function KeyValueEditor({
 
   return (
     <div className="space-y-2">
-      <Label htmlFor={keyId} className="text-[10px] font-bold uppercase tracking-widest text-on-surface-variant">
+      <Label
+        htmlFor={keyId}
+        className="text-[10px] font-bold uppercase tracking-widest text-on-surface-variant"
+      >
         {label}
       </Label>
       <div className="flex gap-2">
@@ -75,19 +78,14 @@ export default function KeyValueEditor({
             >
               <span className="font-mono text-xs text-on-surface">{k}</span>
               <span className="text-on-surface-variant text-xs">=</span>
-              <span className="font-mono text-xs text-on-surface-variant flex-1 truncate">
-                {v}
-              </span>
+              <span className="font-mono text-xs text-on-surface-variant flex-1 truncate">{v}</span>
               <button
                 type="button"
                 onClick={() => removeEntry(k)}
                 className="shrink-0 rounded-full hover:bg-destructive/15 p-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive focus-visible:ring-inset"
                 aria-label={`Remove ${k}`}
               >
-                <span
-                  className="material-symbols-outlined text-xs"
-                  aria-hidden="true"
-                >
+                <span className="material-symbols-outlined text-xs" aria-hidden="true">
                   close
                 </span>
               </button>
diff --git a/src/application/components/agent/McpServerEditor.tsx b/src/application/components/agent/McpServerEditor.tsx
index a4540b2..7c7d481 100644
--- a/src/application/components/agent/McpServerEditor.tsx
+++ b/src/application/components/agent/McpServerEditor.tsx
@@ -45,10 +45,7 @@ export default function McpServerEditor({
           onClick={onRemove}
           aria-label="Remove server"
         >
-          <span
-            className="material-symbols-outlined text-sm"
-            aria-hidden="true"
-          >
+          <span className="material-symbols-outlined text-sm" aria-hidden="true">
             delete
           </span>
         </Button>
@@ -68,9 +65,7 @@ export default function McpServerEditor({
           <Label htmlFor={`${idBase}-transport`}>Transport</Label>
           <Select
             value={value.transport}
-            onValueChange={(v) =>
-              update({ transport: v as McpTransportType })
-            }
+            onValueChange={(v) => update({ transport: v as McpTransportType })}
           >
             <SelectTrigger id={`${idBase}-transport`}>
               <SelectValue />
@@ -91,9 +86,7 @@ export default function McpServerEditor({
             <Input
               id={`${idBase}-command`}
               value={value.command ?? ""}
-              onChange={(e) =>
-                update({ command: e.target.value || undefined })
-              }
+              onChange={(e) => update({ command: e.target.value || undefined })}
               placeholder="npx"
             />
           </div>
@@ -143,9 +136,7 @@ export default function McpServerEditor({
           id={`${idBase}-auth`}
           type="password"
           value={value.auth_token ?? ""}
-          onChange={(e) =>
-            update({ auth_token: e.target.value || undefined })
-          }
+          onChange={(e) => update({ auth_token: e.target.value || undefined })}
           placeholder="Optional auth token"
         />
       </div>
diff --git a/src/application/components/agent/ResponseFormatEditor.tsx b/src/application/components/agent/ResponseFormatEditor.tsx
index 5ed0518..be89136 100644
--- a/src/application/components/agent/ResponseFormatEditor.tsx
+++ b/src/application/components/agent/ResponseFormatEditor.tsx
@@ -11,9 +11,7 @@ export default function ResponseFormatEditor({
   value,
   onChange,
 }: Readonly<ResponseFormatEditorProps>) {
-  const [text, setText] = useState(() =>
-    value ? JSON.stringify(value, null, 2) : "",
-  );
+  const [text, setText] = useState(() => (value ? JSON.stringify(value, null, 2) : ""));
   const [parseError, setParseError] = useState<string | null>(null);
 
   function handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {
@@ -49,11 +47,7 @@ export default function ResponseFormatEditor({
         aria-describedby={parseError ? "response-format-error" : undefined}
       />
       {parseError && (
-        <p
-          id="response-format-error"
-          role="alert"
-          className="text-destructive text-xs mt-1"
-        >
+        <p id="response-format-error" role="alert" className="text-destructive text-xs mt-1">
           {parseError}
         </p>
       )}
diff --git a/src/application/components/agent/StringListEditor.tsx b/src/application/components/agent/StringListEditor.tsx
index 36175cd..5fb1c58 100644
--- a/src/application/components/agent/StringListEditor.tsx
+++ b/src/application/components/agent/StringListEditor.tsx
@@ -40,7 +40,10 @@ export default function StringListEditor({
 
   return (
     <div className="space-y-2">
-      <Label htmlFor={inputId} className="text-[10px] font-bold uppercase tracking-widest text-on-surface-variant">
+      <Label
+        htmlFor={inputId}
+        className="text-[10px] font-bold uppercase tracking-widest text-on-surface-variant"
+      >
         {label}
       </Label>
       <div className="flex gap-2">
@@ -51,7 +54,7 @@ export default function StringListEditor({
           onKeyDown={handleKeyDown}
           placeholder={placeholder}
           className="flex-1"
-          name={`${label.toLowerCase().replace(/\s+/g, '-')}-input`}
+          name={`${label.toLowerCase().replace(/\s+/g, "-")}-input`}
         />
         <Button type="button" variant="outline" size="sm" onClick={addItem}>
           Add
@@ -60,11 +63,7 @@ export default function StringListEditor({
       {value.length > 0 && (
         <div className="flex flex-wrap gap-1.5">
           {value.map((item, index) => (
-            <Badge
-              key={item}
-              variant="secondary"
-              className="gap-1 pr-1 font-mono text-xs"
-            >
+            <Badge key={item} variant="secondary" className="gap-1 pr-1 font-mono text-xs">
               {item}
               <button
                 type="button"
@@ -72,10 +71,7 @@ export default function StringListEditor({
                 className="ml-0.5 rounded-full hover:bg-destructive/15 p-0.5 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-destructive focus-visible:ring-inset"
                 aria-label={`Remove ${item}`}
               >
-                <span
-                  className="material-symbols-outlined text-xs"
-                  aria-hidden="true"
-                >
+                <span className="material-symbols-outlined text-xs" aria-hidden="true">
                   close
                 </span>
               </button>
diff --git a/src/application/components/agent/SubAgentEditor.tsx b/src/application/components/agent/SubAgentEditor.tsx
index 88ed451..ac46238 100644
--- a/src/application/components/agent/SubAgentEditor.tsx
+++ b/src/application/components/agent/SubAgentEditor.tsx
@@ -36,10 +36,7 @@ export default function SubAgentEditor({
           onClick={onRemove}
           aria-label="Remove subagent"
         >
-          <span
-            className="material-symbols-outlined text-sm"
-            aria-hidden="true"
-          >
+          <span className="material-symbols-outlined text-sm" aria-hidden="true">
             delete
           </span>
         </Button>
@@ -89,9 +86,7 @@ export default function SubAgentEditor({
         <Textarea
           id={`sub-instr-${index}`}
           value={value.instructions ?? ""}
-          onChange={(e) =>
-            update({ instructions: e.target.value || undefined })
-          }
+          onChange={(e) => update({ instructions: e.target.value || undefined })}
           placeholder="Specific instructions for this subagent (optional)"
           rows={3}
         />
diff --git a/src/application/components/agent/formConstants.ts b/src/application/components/agent/formConstants.ts
new file mode 100644
index 0000000..270af23
--- /dev/null
+++ b/src/application/components/agent/formConstants.ts
@@ -0,0 +1,2 @@
+export const AGENT_CONFIG_FORM_ID = "agent-config-form";
+export const AGENT_YAML_FORM_ID = "agent-yaml-form";
diff --git a/src/application/components/chat/ChatMessage.tsx b/src/application/components/chat/ChatMessage.tsx
index c6dd5f9..a0993a3 100644
--- a/src/application/components/chat/ChatMessage.tsx
+++ b/src/application/components/chat/ChatMessage.tsx
@@ -2,11 +2,7 @@ import { memo } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { cn } from "@/application/lib/utils";
-import {
-  MessageRole,
-  MessageStatus,
-  type Message,
-} from "@/domain/entities/chat/message";
+import { MessageRole, MessageStatus, type Message } from "@/domain/entities/chat/message";
 import StatusBadge from "@/application/components/shared/StatusBadge";
 import HITLReviewPanel from "@/application/components/chat/HITLReviewPanel";
 import ThinkingBlock from "@/application/components/chat/ThinkingBlock";
@@ -26,11 +22,7 @@ function formatTimestamp(ts: string): string {
   }).format(date);
 }
 
-function ChatMessageImpl({
-  message,
-  agentName,
-  threadId,
-}: Readonly<ChatMessageProps>) {
+function ChatMessageImpl({ message, agentName, threadId }: Readonly<ChatMessageProps>) {
   const isHuman = message.role === MessageRole.HUMAN;
   const isAi = message.role === MessageRole.AI;
   const isAwaitingHitl = message.status === MessageStatus.AWAITING_HITL;
@@ -45,9 +37,7 @@ function ChatMessageImpl({
             </p>
           </div>
           <p className="text-[11px] text-on-surface-variant mt-2 text-right">
-            <time dateTime={message.timestamp}>
-              {formatTimestamp(message.timestamp)}
-            </time>
+            <time dateTime={message.timestamp}>{formatTimestamp(message.timestamp)}</time>
           </p>
         </article>
       </div>
@@ -58,19 +48,14 @@ function ChatMessageImpl({
     return (
       <div className="flex gap-3 max-w-4xl">
         <div className="w-8 h-8 rounded-lg bg-primary-container flex items-center justify-center shrink-0 mt-1">
-          <span
-            className="material-symbols-outlined text-white text-sm"
-            aria-hidden="true"
-          >
+          <span className="material-symbols-outlined text-white text-sm" aria-hidden="true">
             hub
           </span>
         </div>
 
         <article className="flex-1 min-w-0">
           <div className="flex items-center gap-2 mb-2">
-            <span className="font-headline font-bold text-sm text-on-surface">
-              {agentName}
-            </span>
+            <span className="font-headline font-bold text-sm text-on-surface">{agentName}</span>
             {message.status && <StatusBadge status={message.status} />}
           </div>
 
@@ -85,9 +70,7 @@ function ChatMessageImpl({
                 "prose-a:text-secondary-brand prose-a:no-underline hover:prose-a:underline",
               )}
             >
-              <ReactMarkdown remarkPlugins={[remarkGfm]}>
-                {message.content}
-              </ReactMarkdown>
+              <ReactMarkdown remarkPlugins={[remarkGfm]}>{message.content}</ReactMarkdown>
             </div>
 
             <ThinkingBlock key={message.timestamp} text={message.thinking} />
@@ -95,16 +78,11 @@ function ChatMessageImpl({
           </div>
 
           {isAwaitingHitl && message.tool_calls?.length && threadId && (
-            <HITLReviewPanel
-              toolCalls={message.tool_calls}
-              threadId={threadId}
-            />
+            <HITLReviewPanel toolCalls={message.tool_calls} threadId={threadId} />
           )}
 
           <p className="text-[11px] text-on-surface-variant mt-2">
-            <time dateTime={message.timestamp}>
-              {formatTimestamp(message.timestamp)}
-            </time>
+            <time dateTime={message.timestamp}>{formatTimestamp(message.timestamp)}</time>
           </p>
         </article>
       </div>
@@ -132,4 +110,4 @@ const ChatMessage = memo(ChatMessageImpl, (prev, next) => {
   );
 });
 
-export default ChatMessage;
\ No newline at end of file
+export default ChatMessage;
diff --git a/src/application/components/chat/HITLReviewPanel.tsx b/src/application/components/chat/HITLReviewPanel.tsx
index 55a8c17..35fe8d4 100644
--- a/src/application/components/chat/HITLReviewPanel.tsx
+++ b/src/application/components/chat/HITLReviewPanel.tsx
@@ -10,10 +10,7 @@ interface HITLReviewPanelProps {
 
 type ReviewState = "idle" | "reviewing" | "rejecting";
 
-export default function HITLReviewPanel({
-  toolCalls,
-  threadId,
-}: Readonly<HITLReviewPanelProps>) {
+export default function HITLReviewPanel({ toolCalls, threadId }: Readonly<HITLReviewPanelProps>) {
   const [reviewState, setReviewState] = useState<ReviewState>("idle");
   const [rejectReason, setRejectReason] = useState("");
   const sendMessage = useSendMessage(threadId);
@@ -53,9 +50,7 @@ export default function HITLReviewPanel({
     return (
       <div className="mt-4 p-4 bg-surface-container-low rounded-xl flex items-center justify-between">
         <div className="flex items-center gap-3">
-          <span className="material-symbols-outlined text-secondary-brand text-xl">
-            warning
-          </span>
+          <span className="material-symbols-outlined text-secondary-brand text-xl">warning</span>
           <span className="text-sm font-medium text-on-surface">
             Validation required: <span className="font-mono">{toolName}</span>
           </span>
@@ -75,9 +70,7 @@ export default function HITLReviewPanel({
     <div className="mt-4 p-4 bg-surface-container-low rounded-xl space-y-4">
       {/* Tool call details */}
       <div className="flex items-center gap-3">
-        <span className="material-symbols-outlined text-secondary-brand text-xl">
-          warning
-        </span>
+        <span className="material-symbols-outlined text-secondary-brand text-xl">warning</span>
         <span className="text-sm font-medium text-on-surface">
           Review: <span className="font-mono">{toolName}</span>
         </span>
diff --git a/src/application/components/chat/MessageList.tsx b/src/application/components/chat/MessageList.tsx
index 694040c..9f5fa39 100644
--- a/src/application/components/chat/MessageList.tsx
+++ b/src/application/components/chat/MessageList.tsx
@@ -13,10 +13,7 @@ interface MessageListProps {
   agentName: string;
 }
 
-export default function MessageList({
-  threadId,
-  agentName,
-}: Readonly<MessageListProps>) {
+export default function MessageList({ threadId, agentName }: Readonly<MessageListProps>) {
   const { data: messages, isLoading } = useMessages(threadId);
   const {
     streamingContent,
@@ -31,8 +28,7 @@ export default function MessageList({
   useEffect(() => {
     const el = scrollRef.current;
     if (!el) return;
-    const isNearBottom =
-      el.scrollHeight - el.scrollTop - el.clientHeight < 150;
+    const isNearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 150;
     if (isNearBottom) {
       requestAnimationFrame(() => {
         el.scrollTop = el.scrollHeight;
@@ -71,10 +67,7 @@ export default function MessageList({
   }
 
   return (
-    <div
-      ref={scrollRef}
-      className="flex-1 overflow-y-auto px-6 py-8 md:px-12 lg:px-24 xl:px-48"
-    >
+    <div ref={scrollRef} className="flex-1 overflow-y-auto px-6 py-8 md:px-12 lg:px-24 xl:px-48">
       <div className="space-y-6">
         {messages?.map((msg, idx) => (
           <ChatMessage
@@ -104,25 +97,18 @@ export default function MessageList({
         {isStreaming && (
           <div className="flex gap-3 max-w-4xl">
             <div className="w-8 h-8 rounded-lg bg-primary-container flex items-center justify-center shrink-0 mt-1">
-              <span
-                className="material-symbols-outlined text-white text-sm"
-                aria-hidden="true"
-              >
+              <span className="material-symbols-outlined text-white text-sm" aria-hidden="true">
                 hub
               </span>
             </div>
             <div className="flex-1 min-w-0">
               <div className="flex items-center gap-2 mb-2">
-                <span className="font-headline font-bold text-sm text-on-surface">
-                  {agentName}
-                </span>
+                <span className="font-headline font-bold text-sm text-on-surface">{agentName}</span>
               </div>
               <div className="bg-surface-container-lowest p-6 rounded-xl rounded-tl-none ambient-shadow border border-outline-variant/15">
                 {streamingContent && (
                   <div className="prose prose-sm max-w-none break-words overflow-wrap-anywhere prose-p:text-on-surface prose-p:leading-relaxed prose-code:text-xs prose-code:bg-surface-container-low prose-code:px-1.5 prose-code:py-0.5 prose-code:rounded prose-pre:bg-surface-container prose-pre:rounded-xl prose-pre:overflow-x-auto mb-4">
-                    <ReactMarkdown remarkPlugins={[remarkGfm]}>
-                      {streamingContent}
-                    </ReactMarkdown>
+                    <ReactMarkdown remarkPlugins={[remarkGfm]}>{streamingContent}</ReactMarkdown>
                   </div>
                 )}
                 <ThinkingBlock text={streamingThinking} />
@@ -156,14 +142,10 @@ export default function MessageList({
             </div>
             <div className="flex-1 min-w-0">
               <div className="flex items-center gap-2 mb-2">
-                <span className="font-headline font-bold text-sm text-on-surface">
-                  {agentName}
-                </span>
+                <span className="font-headline font-bold text-sm text-on-surface">{agentName}</span>
               </div>
               <div className="bg-destructive/5 p-6 rounded-xl rounded-tl-none border border-destructive/20">
-                <p className="text-destructive text-sm font-medium">
-                  Something went wrong
-                </p>
+                <p className="text-destructive text-sm font-medium">Something went wrong</p>
                 <p className="text-destructive/80 text-xs mt-1">{error}</p>
               </div>
             </div>
diff --git a/src/application/components/chat/StructuredResponseCard.tsx b/src/application/components/chat/StructuredResponseCard.tsx
index 0cd61ea..95f8754 100644
--- a/src/application/components/chat/StructuredResponseCard.tsx
+++ b/src/application/components/chat/StructuredResponseCard.tsx
@@ -6,10 +6,7 @@ interface StructuredResponseCardProps {
   className?: string;
 }
 
-export default function StructuredResponseCard({
-  data,
-  className,
-}: StructuredResponseCardProps) {
+export default function StructuredResponseCard({ data, className }: StructuredResponseCardProps) {
   const [copied, setCopied] = useState(false);
   const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
@@ -55,24 +52,15 @@ export default function StructuredResponseCard({
           <span className="material-symbols-outlined text-base text-secondary-brand">
             data_object
           </span>
-          <span className="text-xs font-medium text-on-surface-variant">
-            Structured Response
-          </span>
+          <span className="text-xs font-medium text-on-surface-variant">Structured Response</span>
         </div>
         <button
           type="button"
           onClick={handleCopy}
           className="flex items-center gap-1 text-[11px] text-secondary-brand hover:opacity-80 transition-opacity"
-          aria-label={
-            copied
-              ? "Copied to clipboard"
-              : "Copy structured response to clipboard"
-          }
+          aria-label={copied ? "Copied to clipboard" : "Copy structured response to clipboard"}
         >
-          <span
-            className="material-symbols-outlined text-base"
-            aria-hidden="true"
-          >
+          <span className="material-symbols-outlined text-base" aria-hidden="true">
             {copied ? "check" : "content_copy"}
           </span>
           <span aria-live="polite">{copied ? "Copied" : "Copy"}</span>
diff --git a/src/application/components/layout/MainLayout.tsx b/src/application/components/layout/MainLayout.tsx
index a812142..be2b05a 100644
--- a/src/application/components/layout/MainLayout.tsx
+++ b/src/application/components/layout/MainLayout.tsx
@@ -42,4 +42,4 @@ export default function MainLayout({
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/application/components/layout/ThreadSidebar.tsx b/src/application/components/layout/ThreadSidebar.tsx
index b099c6a..279e06f 100644
--- a/src/application/components/layout/ThreadSidebar.tsx
+++ b/src/application/components/layout/ThreadSidebar.tsx
@@ -33,9 +33,7 @@ function getThreadPreview(thread: Thread): string {
   return `Thread · ${thread.id.slice(0, 8)}`;
 }
 
-export default function ThreadSidebar({
-  activeThreadId,
-}: Readonly<ThreadSidebarProps>) {
+export default function ThreadSidebar({ activeThreadId }: Readonly<ThreadSidebarProps>) {
   const { data: threads, isLoading } = useThreads();
   const { data: agents, isLoading: agentsLoading } = useAgents();
   const createThread = useCreateThread();
@@ -96,10 +94,7 @@ export default function ThreadSidebar({
           onClick={handleNewConversation}
           className="w-full flex items-center gap-2 px-4 py-3 rounded-xl bg-primary-container text-white font-headline text-xs font-bold uppercase tracking-widest hover:opacity-90 transition-opacity focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-brand focus-visible:ring-offset-2"
         >
-          <span
-            className="material-symbols-outlined text-base"
-            aria-hidden="true"
-          >
+          <span className="material-symbols-outlined text-base" aria-hidden="true">
             add
           </span>
           New Conversation
@@ -109,10 +104,7 @@ export default function ThreadSidebar({
       {/* Thread list */}
       <div className="flex-1 overflow-y-auto px-2 pb-4 overscroll-contain">
         {isLoading && (
-          <p
-            className="text-xs text-on-surface-variant px-3 py-2"
-            aria-live="polite"
-          >
+          <p className="text-xs text-on-surface-variant px-3 py-2" aria-live="polite">
             Loading threads…
           </p>
         )}
@@ -171,24 +163,16 @@ export default function ThreadSidebar({
       </div>
 
       {/* Agent selection dialog */}
-      <Dialog
-        open={showAgentDialog}
-        onOpenChange={(v) => setShowAgentDialog(v)}
-      >
+      <Dialog open={showAgentDialog} onOpenChange={(v) => setShowAgentDialog(v)}>
         <DialogContent className="max-w-sm w-full">
           <DialogHeader>
-            <DialogTitle className="font-headline text-lg font-bold">
-              Choose an Agent
-            </DialogTitle>
+            <DialogTitle className="font-headline text-lg font-bold">Choose an Agent</DialogTitle>
             <DialogDescription className="sr-only">
               Select an agent to start a new conversation thread
             </DialogDescription>
           </DialogHeader>
           {agentsLoading ? (
-            <p
-              className="text-sm text-on-surface-variant"
-              aria-live="polite"
-            >
+            <p className="text-sm text-on-surface-variant" aria-live="polite">
               Loading agents…
             </p>
           ) : (
@@ -207,9 +191,7 @@ export default function ThreadSidebar({
                   className="w-full text-left p-3 rounded-lg hover:bg-surface-container-low transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-brand focus-visible:ring-offset-2 disabled:opacity-50"
                 >
                   <span className="block font-medium text-sm">{agent.name}</span>
-                  <span className="block text-xs text-on-surface-variant">
-                    {agent.model}
-                  </span>
+                  <span className="block text-xs text-on-surface-variant">{agent.model}</span>
                 </button>
               ))}
             </div>
@@ -218,4 +200,4 @@ export default function ThreadSidebar({
       </Dialog>
     </aside>
   );
-}
\ No newline at end of file
+}
diff --git a/src/application/components/layout/TopNav.tsx b/src/application/components/layout/TopNav.tsx
index d8d5ed5..908cc62 100644
--- a/src/application/components/layout/TopNav.tsx
+++ b/src/application/components/layout/TopNav.tsx
@@ -29,10 +29,7 @@ export default function TopNav() {
         </div>
 
         {/* Center: Navigation (desktop) */}
-        <nav
-          className="hidden md:flex items-center gap-8"
-          aria-label="Primary navigation"
-        >
+        <nav className="hidden md:flex items-center gap-8" aria-label="Primary navigation">
           {NAV_LINKS.map((link) => (
             <NavLink
               key={link.to}
@@ -125,4 +122,4 @@ export default function TopNav() {
       )}
     </header>
   );
-}
\ No newline at end of file
+}
diff --git a/src/application/components/rag/BreadcrumbBar.tsx b/src/application/components/rag/BreadcrumbBar.tsx
index 693cd76..f9640a9 100644
--- a/src/application/components/rag/BreadcrumbBar.tsx
+++ b/src/application/components/rag/BreadcrumbBar.tsx
@@ -3,10 +3,7 @@ interface BreadcrumbBarProps {
   onNavigate: (index: number) => void;
 }
 
-export default function BreadcrumbBar({
-  segments,
-  onNavigate,
-}: Readonly<BreadcrumbBarProps>) {
+export default function BreadcrumbBar({ segments, onNavigate }: Readonly<BreadcrumbBarProps>) {
   return (
     <nav
       className="flex items-center gap-2 text-sm text-on-surface-variant mb-6 flex-wrap"
@@ -18,10 +15,7 @@ export default function BreadcrumbBar({
         aria-label="Home"
         className="flex items-center justify-center w-8 h-8 rounded-lg hover:bg-surface-container transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-brand focus-visible:ring-inset"
       >
-        <span
-          className="material-symbols-outlined text-lg"
-          aria-hidden="true"
-        >
+        <span className="material-symbols-outlined text-lg" aria-hidden="true">
           home
         </span>
       </button>
@@ -29,14 +23,8 @@ export default function BreadcrumbBar({
         {segments.map((segment, index) => {
           const isLast = index === segments.length - 1;
           return (
-            <li
-              key={`${segment}-${index}`}
-              className="flex items-center gap-2 min-w-0"
-            >
-              <span
-                className="material-symbols-outlined text-xs text-outline"
-                aria-hidden="true"
-              >
+            <li key={`${segment}-${index}`} className="flex items-center gap-2 min-w-0">
+              <span className="material-symbols-outlined text-xs text-outline" aria-hidden="true">
                 chevron_right
               </span>
               {isLast ? (
@@ -61,4 +49,4 @@ export default function BreadcrumbBar({
       </ol>
     </nav>
   );
-}
\ No newline at end of file
+}
diff --git a/src/application/components/rag/FileContentPanel.tsx b/src/application/components/rag/FileContentPanel.tsx
index d9dd3d9..d64b1d4 100644
--- a/src/application/components/rag/FileContentPanel.tsx
+++ b/src/application/components/rag/FileContentPanel.tsx
@@ -46,18 +46,13 @@ export default function FileContentPanel({
         {/* Metadata bar */}
         <div className="px-6 py-3 border-b border-outline-variant">
           <div className="flex items-center gap-4 text-xs font-body text-on-surface-variant">
-            <span className="bg-surface-container px-2 py-0.5 rounded">
-              {metadata.format_type}
-            </span>
+            <span className="bg-surface-container px-2 py-0.5 rounded">{metadata.format_type}</span>
             <span className="break-all">{metadata.mime_type}</span>
           </div>
         </div>
 
         {/* Body (scrollable) */}
-        <div
-          ref={tablesRef}
-          className="flex-1 overflow-y-auto px-6 py-4 overscroll-contain"
-        >
+        <div ref={tablesRef} className="flex-1 overflow-y-auto px-6 py-4 overscroll-contain">
           <pre className="font-body text-sm text-on-surface whitespace-pre-wrap overflow-wrap-anywhere">
             {content}
           </pre>
@@ -109,8 +104,7 @@ export default function FileContentPanel({
             </div>
           )}
         </div>
-
-        </DialogContent>
+      </DialogContent>
     </Dialog>
   );
-}
\ No newline at end of file
+}
diff --git a/src/application/components/rag/FileList.tsx b/src/application/components/rag/FileList.tsx
index 4821a21..b5f54dd 100644
--- a/src/application/components/rag/FileList.tsx
+++ b/src/application/components/rag/FileList.tsx
@@ -74,9 +74,7 @@ export default function FileList({
         >
           folder_off
         </span>
-        <p className="text-on-surface-variant font-headline text-sm">
-          No files or folders found.
-        </p>
+        <p className="text-on-surface-variant font-headline text-sm">No files or folders found.</p>
       </div>
     );
   }
@@ -88,8 +86,12 @@ export default function FileList({
           key={folder.prefix}
           name={folder.name}
           onClick={() => onFolderClick(folder.prefix)}
-          onIndexLightRAG={onFolderIndexLightRAG ? () => onFolderIndexLightRAG(folder.prefix) : undefined}
-          onIndexClassical={onFolderIndexClassical ? () => onFolderIndexClassical(folder.prefix) : undefined}
+          onIndexLightRAG={
+            onFolderIndexLightRAG ? () => onFolderIndexLightRAG(folder.prefix) : undefined
+          }
+          onIndexClassical={
+            onFolderIndexClassical ? () => onFolderIndexClassical(folder.prefix) : undefined
+          }
         />
       ))}
       {files.map((file) => (
@@ -99,10 +101,14 @@ export default function FileList({
           size={file.size}
           lastModified={file.lastModified}
           onRead={onFileRead ? () => onFileRead(file.objectName) : undefined}
-          onIndexLightRAG={onFileIndexLightRAG ? () => onFileIndexLightRAG(file.objectName) : undefined}
-          onIndexClassical={onFileIndexClassical ? () => onFileIndexClassical(file.objectName) : undefined}
+          onIndexLightRAG={
+            onFileIndexLightRAG ? () => onFileIndexLightRAG(file.objectName) : undefined
+          }
+          onIndexClassical={
+            onFileIndexClassical ? () => onFileIndexClassical(file.objectName) : undefined
+          }
         />
       ))}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/application/components/rag/FileRow.tsx b/src/application/components/rag/FileRow.tsx
index b236a84..1003332 100644
--- a/src/application/components/rag/FileRow.tsx
+++ b/src/application/components/rag/FileRow.tsx
@@ -67,11 +67,12 @@ export default function FileRow({
       >
         {isIndexing ? "progress_activity" : getFileIcon(filename)}
       </span>
-      <span className="font-body text-sm text-on-surface flex-1">
-        {filename}
-      </span>
+      <span className="font-body text-sm text-on-surface flex-1">{filename}</span>
       {isIndexing && (
-        <span className="material-symbols-outlined text-lg animate-spin text-secondary-brand" aria-hidden="true">
+        <span
+          className="material-symbols-outlined text-lg animate-spin text-secondary-brand"
+          aria-hidden="true"
+        >
           progress_activity
         </span>
       )}
@@ -104,4 +105,4 @@ export default function FileRow({
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/application/components/rag/FolderRow.tsx b/src/application/components/rag/FolderRow.tsx
index 97ef874..8b47a26 100644
--- a/src/application/components/rag/FolderRow.tsx
+++ b/src/application/components/rag/FolderRow.tsx
@@ -8,7 +8,13 @@ interface FolderRowProps {
   onIndexClassical?: () => void;
 }
 
-export default function FolderRow({ name, onClick, isIndexing, onIndexLightRAG, onIndexClassical }: Readonly<FolderRowProps>) {
+export default function FolderRow({
+  name,
+  onClick,
+  isIndexing,
+  onIndexLightRAG,
+  onIndexClassical,
+}: Readonly<FolderRowProps>) {
   const hasIndexOptions = onIndexLightRAG || onIndexClassical;
 
   return (
@@ -27,18 +33,16 @@ export default function FolderRow({ name, onClick, isIndexing, onIndexLightRAG,
         >
           {isIndexing ? "progress_activity" : "folder"}
         </span>
-        <span className="font-headline text-sm font-semibold text-on-surface flex-1">
-          {name}
-        </span>
+        <span className="font-headline text-sm font-semibold text-on-surface flex-1">{name}</span>
         {isIndexing && (
-          <span className="material-symbols-outlined text-lg animate-spin text-secondary-brand" aria-hidden="true">
+          <span
+            className="material-symbols-outlined text-lg animate-spin text-secondary-brand"
+            aria-hidden="true"
+          >
             progress_activity
           </span>
         )}
-        <span
-          className="material-symbols-outlined text-lg text-outline"
-          aria-hidden="true"
-        >
+        <span className="material-symbols-outlined text-lg text-outline" aria-hidden="true">
           chevron_right
         </span>
       </button>
@@ -52,4 +56,4 @@ export default function FolderRow({ name, onClick, isIndexing, onIndexLightRAG,
       )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/application/components/rag/IndexActionMenu.tsx b/src/application/components/rag/IndexActionMenu.tsx
index d66b01b..3088a19 100644
--- a/src/application/components/rag/IndexActionMenu.tsx
+++ b/src/application/components/rag/IndexActionMenu.tsx
@@ -35,10 +35,7 @@ export default function IndexActionMenu({
     if (!open) return;
 
     function handleClickOutside(event: MouseEvent) {
-      if (
-        containerRef.current &&
-        !containerRef.current.contains(event.target as Node)
-      ) {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
         setOpen(false);
       }
     }
@@ -148,4 +145,4 @@ export default function IndexActionMenu({
       )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/application/components/rag/PipelineToggle.tsx b/src/application/components/rag/PipelineToggle.tsx
index fe5f347..2302065 100644
--- a/src/application/components/rag/PipelineToggle.tsx
+++ b/src/application/components/rag/PipelineToggle.tsx
@@ -12,10 +12,7 @@ const PIPELINE_OPTIONS = [
   { value: "classical" as const, label: "Classical" },
 ];
 
-export default function PipelineToggle({
-  value,
-  onChange,
-}: Readonly<PipelineToggleProps>) {
+export default function PipelineToggle({ value, onChange }: Readonly<PipelineToggleProps>) {
   return (
     <SegmentedToggle
       value={value}
@@ -26,4 +23,4 @@ export default function PipelineToggle({
       itemClassName="px-4 text-xs"
     />
   );
-}
\ No newline at end of file
+}
diff --git a/src/application/components/rag/QueryOptions.tsx b/src/application/components/rag/QueryOptions.tsx
index fea6035..731cb8b 100644
--- a/src/application/components/rag/QueryOptions.tsx
+++ b/src/application/components/rag/QueryOptions.tsx
@@ -59,10 +59,7 @@ export default function QueryOptions({
         onClick={() => setExpanded(!expanded)}
         className="flex items-center gap-2 text-on-surface-variant font-headline text-sm hover:text-on-surface transition-colors"
       >
-        <span
-          className="material-symbols-outlined text-base"
-          aria-hidden="true"
-        >
+        <span className="material-symbols-outlined text-base" aria-hidden="true">
           {expanded ? "expand_less" : "expand_more"}
         </span>
         {"Advanced Options"}
@@ -71,7 +68,10 @@ export default function QueryOptions({
       {expanded && (
         <div className="mt-3 space-y-4 pl-6">
           <div className="flex items-center gap-4">
-            <label htmlFor="query-mode" className="font-headline text-sm text-on-surface-variant w-28">
+            <label
+              htmlFor="query-mode"
+              className="font-headline text-sm text-on-surface-variant w-28"
+            >
               Mode
             </label>
             <select
@@ -89,7 +89,10 @@ export default function QueryOptions({
           </div>
 
           <div className="flex items-center gap-4">
-            <label htmlFor="query-topk" className="font-headline text-sm text-on-surface-variant w-28">
+            <label
+              htmlFor="query-topk"
+              className="font-headline text-sm text-on-surface-variant w-28"
+            >
               Top K
             </label>
             <input
@@ -106,7 +109,10 @@ export default function QueryOptions({
           {pipeline === "classical" && (
             <>
               <div className="flex items-center gap-4">
-                <label htmlFor="query-variations" className="font-headline text-sm text-on-surface-variant w-28">
+                <label
+                  htmlFor="query-variations"
+                  className="font-headline text-sm text-on-surface-variant w-28"
+                >
                   Variations
                 </label>
                 <input
@@ -121,7 +127,10 @@ export default function QueryOptions({
               </div>
 
               <div className="flex items-center gap-4">
-                <label htmlFor="query-threshold" className="font-headline text-sm text-on-surface-variant w-28">
+                <label
+                  htmlFor="query-threshold"
+                  className="font-headline text-sm text-on-surface-variant w-28"
+                >
                   Threshold
                 </label>
                 <input
@@ -137,7 +146,10 @@ export default function QueryOptions({
               </div>
 
               <div className="flex items-center gap-4">
-                <label htmlFor="query-vector-threshold" className="font-headline text-sm text-on-surface-variant w-28">
+                <label
+                  htmlFor="query-vector-threshold"
+                  className="font-headline text-sm text-on-surface-variant w-28"
+                >
                   Vector Dist.
                 </label>
                 <input
@@ -153,7 +165,10 @@ export default function QueryOptions({
               </div>
 
               <div className="flex items-center gap-4">
-                <label htmlFor="query-llm-judge" className="font-headline text-sm text-on-surface-variant w-28">
+                <label
+                  htmlFor="query-llm-judge"
+                  className="font-headline text-sm text-on-surface-variant w-28"
+                >
                   LLM Judge
                 </label>
                 <input
@@ -170,4 +185,4 @@ export default function QueryOptions({
       )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/application/components/rag/QueryPanel.tsx b/src/application/components/rag/QueryPanel.tsx
index d29a64f..380af4c 100644
--- a/src/application/components/rag/QueryPanel.tsx
+++ b/src/application/components/rag/QueryPanel.tsx
@@ -10,9 +10,7 @@ interface QueryPanelProps {
   workingDir: string;
 }
 
-export default function QueryPanel({
-  workingDir,
-}: Readonly<QueryPanelProps>) {
+export default function QueryPanel({ workingDir }: Readonly<QueryPanelProps>) {
   const [pipeline, setPipeline] = useState<"lightrag" | "classical">("lightrag");
   const [query, setQuery] = useState("");
   const [mode, setMode] = useState<QueryMode | ClassicalQueryMode>("naive");
@@ -94,12 +92,16 @@ export default function QueryPanel({
         >
           {isLoading ? (
             <>
-              <span className="material-symbols-outlined text-lg animate-spin" aria-hidden="true">progress_activity</span>
+              <span className="material-symbols-outlined text-lg animate-spin" aria-hidden="true">
+                progress_activity
+              </span>
               {"Searching..."}
             </>
           ) : (
             <>
-              <span className="material-symbols-outlined text-lg" aria-hidden="true">search</span>
+              <span className="material-symbols-outlined text-lg" aria-hidden="true">
+                search
+              </span>
               {"Search"}
             </>
           )}
@@ -107,16 +109,9 @@ export default function QueryPanel({
       </div>
 
       <div>
-        <h3 className="font-headline text-sm font-semibold text-on-surface mb-3">
-          Results
-        </h3>
-        <QueryResults
-          data={result}
-          error={error}
-          isLoading={isLoading}
-          onRetry={handleRetry}
-        />
+        <h3 className="font-headline text-sm font-semibold text-on-surface mb-3">Results</h3>
+        <QueryResults data={result} error={error} isLoading={isLoading} onRetry={handleRetry} />
       </div>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/application/components/rag/QueryResults.tsx b/src/application/components/rag/QueryResults.tsx
index e466a42..96d981a 100644
--- a/src/application/components/rag/QueryResults.tsx
+++ b/src/application/components/rag/QueryResults.tsx
@@ -34,9 +34,7 @@ export default function QueryResults({
         >
           progress_activity
         </span>
-        <p className="ml-3 text-on-surface-variant font-headline text-sm">
-          Searching...
-        </p>
+        <p className="ml-3 text-on-surface-variant font-headline text-sm">Searching...</p>
       </div>
     );
   }
@@ -44,10 +42,7 @@ export default function QueryResults({
   if (error) {
     return (
       <div className="flex flex-col items-center justify-center py-12 gap-4">
-        <span
-          className="material-symbols-outlined text-4xl text-red-600"
-          aria-hidden="true"
-        >
+        <span className="material-symbols-outlined text-4xl text-red-600" aria-hidden="true">
           error
         </span>
         <p className="text-red-600 font-headline text-sm">{error.message}</p>
@@ -91,14 +86,14 @@ export default function QueryResults({
         className="absolute top-3 right-3 flex items-center gap-1.5 text-on-surface-variant hover:text-on-surface transition-colors bg-surface-container px-2 py-1 rounded-md"
         title="Copy to clipboard"
       >
-          <span className="material-symbols-outlined text-base" aria-hidden="true">
-            {copied ? "check" : "content_copy"}
-          </span>
-          <span className="font-headline text-xs">{copied ? "Copied" : "Copy"}</span>
-        </button>
+        <span className="material-symbols-outlined text-base" aria-hidden="true">
+          {copied ? "check" : "content_copy"}
+        </span>
+        <span className="font-headline text-xs">{copied ? "Copied" : "Copy"}</span>
+      </button>
       <pre className="bg-surface-container-lowest rounded-lg p-4 overflow-auto max-h-[500px] text-xs font-body text-on-surface border border-outline-variant">
         {jsonText}
       </pre>
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/application/components/rag/RagTabBar.tsx b/src/application/components/rag/RagTabBar.tsx
index 5a0f18d..4f2ec18 100644
--- a/src/application/components/rag/RagTabBar.tsx
+++ b/src/application/components/rag/RagTabBar.tsx
@@ -10,10 +10,7 @@ const TAB_OPTIONS = [
   { value: "query" as const, label: "Query" },
 ];
 
-export default function RagTabBar({
-  activeTab,
-  onTabChange,
-}: Readonly<RagTabBarProps>) {
+export default function RagTabBar({ activeTab, onTabChange }: Readonly<RagTabBarProps>) {
   return (
     <SegmentedToggle
       value={activeTab}
@@ -23,4 +20,4 @@ export default function RagTabBar({
       ariaLabel="RAG view tabs"
     />
   );
-}
\ No newline at end of file
+}
diff --git a/src/application/components/rag/UploadButton.tsx b/src/application/components/rag/UploadButton.tsx
index 951f0b4..9eacf6e 100644
--- a/src/application/components/rag/UploadButton.tsx
+++ b/src/application/components/rag/UploadButton.tsx
@@ -7,10 +7,7 @@ interface UploadButtonProps {
   onUploadComplete?: () => void;
 }
 
-export default function UploadButton({
-  prefix,
-  onUploadComplete,
-}: Readonly<UploadButtonProps>) {
+export default function UploadButton({ prefix, onUploadComplete }: Readonly<UploadButtonProps>) {
   const fileInputRef = useRef<HTMLInputElement>(null);
   const { mutate, isPending } = useUploadFile();
 
diff --git a/src/application/components/rag/WorkspaceSelector.tsx b/src/application/components/rag/WorkspaceSelector.tsx
index ec50b3f..88808fa 100644
--- a/src/application/components/rag/WorkspaceSelector.tsx
+++ b/src/application/components/rag/WorkspaceSelector.tsx
@@ -35,10 +35,7 @@ export default function WorkspaceSelector({
     if (!showSuggestions) return;
 
     function handleClickOutside(event: MouseEvent) {
-      if (
-        containerRef.current &&
-        !containerRef.current.contains(event.target as Node)
-      ) {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
         setShowSuggestions(false);
       }
     }
@@ -158,4 +155,4 @@ export default function WorkspaceSelector({
       )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/application/components/shared/SegmentedToggle.tsx b/src/application/components/shared/SegmentedToggle.tsx
index 33dd8fa..0dddb11 100644
--- a/src/application/components/shared/SegmentedToggle.tsx
+++ b/src/application/components/shared/SegmentedToggle.tsx
@@ -36,20 +36,13 @@ export default function SegmentedToggle<V extends string>({
   const isRadio = pattern === "radio";
 
   // Parent role varies by pattern.
-  const parentRole = isTab
-    ? "tablist"
-    : isRadio
-      ? "radiogroup"
-      : undefined;
+  const parentRole = isTab ? "tablist" : isRadio ? "radiogroup" : undefined;
 
   return (
     <div
       role={parentRole}
       aria-label={ariaLabel}
-      className={cn(
-        "flex items-center gap-1 bg-surface-container rounded-lg p-1",
-        className,
-      )}
+      className={cn("flex items-center gap-1 bg-surface-container rounded-lg p-1", className)}
     >
       {options.map((opt) => {
         const selected = opt.value === value;
@@ -80,4 +73,4 @@ export default function SegmentedToggle<V extends string>({
       })}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/src/application/components/shared/StatusBadge.tsx b/src/application/components/shared/StatusBadge.tsx
index c248f30..c84f238 100644
--- a/src/application/components/shared/StatusBadge.tsx
+++ b/src/application/components/shared/StatusBadge.tsx
@@ -14,11 +14,7 @@ type BadgeVariant = {
 function resolveVariant(status: string): BadgeVariant {
   const normalized = status.toLowerCase();
 
-  if (
-    normalized === "active" ||
-    normalized === "completed" ||
-    normalized === "approved"
-  ) {
+  if (normalized === "active" || normalized === "completed" || normalized === "approved") {
     return { bg: "bg-emerald-100", text: "text-emerald-700" };
   }
 
@@ -39,11 +35,7 @@ function resolveVariant(status: string): BadgeVariant {
     return { bg: "bg-blue-100", text: "text-blue-700" };
   }
 
-  if (
-    normalized === "rejected" ||
-    normalized === "error" ||
-    normalized === "failed"
-  ) {
+  if (normalized === "rejected" || normalized === "error" || normalized === "failed") {
     return { bg: "bg-red-100", text: "text-red-700" };
   }
 
@@ -56,15 +48,10 @@ function resolveVariant(status: string): BadgeVariant {
 
 /** Format display label from a raw status string. */
 function formatLabel(status: string): string {
-  return status
-    .replace(/_/g, " ")
-    .replace(/\b\w/g, (m) => m.toUpperCase());
+  return status.replace(/_/g, " ").replace(/\b\w/g, (m) => m.toUpperCase());
 }
 
-export default function StatusBadge({
-  status,
-  className,
-}: Readonly<StatusBadgeProps>) {
+export default function StatusBadge({ status, className }: Readonly<StatusBadgeProps>) {
   const { bg, text } = resolveVariant(status);
 
   return (
@@ -79,4 +66,4 @@ export default function StatusBadge({
       {formatLabel(status)}
     </span>
   );
-}
\ No newline at end of file
+}
diff --git a/src/application/components/ui/accordion.tsx b/src/application/components/ui/accordion.tsx
index feb78d3..c073cfe 100644
--- a/src/application/components/ui/accordion.tsx
+++ b/src/application/components/ui/accordion.tsx
@@ -1,10 +1,10 @@
-import * as React from "react"
-import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDown } from "lucide-react"
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown } from "lucide-react";
 
-import { cn } from "@/application/lib/utils"
+import { cn } from "@/application/lib/utils";
 
-const Accordion = AccordionPrimitive.Root
+const Accordion = AccordionPrimitive.Root;
 
 const AccordionItem = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Item>,
@@ -15,8 +15,8 @@ const AccordionItem = React.forwardRef<
     className={cn("border-b border-outline-variant/30 last:border-0", className)}
     {...props}
   />
-))
-AccordionItem.displayName = "AccordionItem"
+));
+AccordionItem.displayName = "AccordionItem";
 
 const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
@@ -27,16 +27,19 @@ const AccordionTrigger = React.forwardRef<
       ref={ref}
       className={cn(
         "flex flex-1 items-center justify-between py-3.5 px-4 -mx-4 rounded-lg font-medium transition-colors hover:bg-surface-container-low/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-brand focus-visible:ring-inset [&[data-state=open]>svg]:rotate-180",
-        className
+        className,
       )}
       {...props}
     >
       {children}
-      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200 text-on-surface-variant" aria-hidden="true" />
+      <ChevronDown
+        className="h-4 w-4 shrink-0 transition-transform duration-200 text-on-surface-variant"
+        aria-hidden="true"
+      />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
-))
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 
 const AccordionContent = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Content>,
@@ -49,8 +52,8 @@ const AccordionContent = React.forwardRef<
   >
     <div className={cn("pb-5 pt-3", className)}>{children}</div>
   </AccordionPrimitive.Content>
-))
+));
 
-AccordionContent.displayName = AccordionPrimitive.Content.displayName
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
 
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
diff --git a/src/application/components/ui/badge.tsx b/src/application/components/ui/badge.tsx
index 16fc8e3..be3c971 100644
--- a/src/application/components/ui/badge.tsx
+++ b/src/application/components/ui/badge.tsx
@@ -1,15 +1,14 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/application/lib/utils"
+import { cn } from "@/application/lib/utils";
 
 const badgeVariants = cva(
   "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
         secondary:
           "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive:
@@ -20,17 +19,14 @@ const badgeVariants = cva(
     defaultVariants: {
       variant: "default",
     },
-  }
-)
+  },
+);
 
 export interface BadgeProps
-  extends React.HTMLAttributes<HTMLDivElement>,
-    VariantProps<typeof badgeVariants> {}
+  extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
 
 function Badge({ className, variant, ...props }: BadgeProps) {
-  return (
-    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-  )
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
 }
 
-export { Badge, badgeVariants }
+export { Badge, badgeVariants };
diff --git a/src/application/components/ui/button.tsx b/src/application/components/ui/button.tsx
index fbd8761..7fde615 100644
--- a/src/application/components/ui/button.tsx
+++ b/src/application/components/ui/button.tsx
@@ -1,24 +1,20 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/application/lib/utils"
+import { cn } from "@/application/lib/utils";
 
 const buttonVariants = cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-xs font-headline font-bold uppercase tracking-widest transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-brand focus-visible:ring-offset-2 focus-visible:ring-offset-surface-container-lowest disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
-        default:
-          "bg-primary-container text-white hover:opacity-90",
-        destructive:
-          "bg-destructive text-white hover:opacity-90",
+        default: "bg-primary-container text-white hover:opacity-90",
+        destructive: "bg-destructive text-white hover:opacity-90",
         outline:
           "border border-outline-variant/60 bg-surface-container-lowest text-on-surface hover:bg-surface-container",
-        secondary:
-          "bg-surface-container text-on-surface-variant hover:bg-surface-container-high",
-        ghost:
-          "text-on-surface-variant hover:bg-surface-container hover:text-on-surface",
+        secondary: "bg-surface-container text-on-surface-variant hover:bg-surface-container-high",
+        ghost: "text-on-surface-variant hover:bg-surface-container hover:text-on-surface",
         link: "text-secondary-brand underline-offset-4 hover:underline",
       },
       size: {
@@ -32,27 +28,22 @@ const buttonVariants = cva(
       variant: "default",
       size: "default",
     },
-  }
-)
+  },
+);
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
+    const Comp = asChild ? Slot : "button";
     return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-Button.displayName = "Button"
+      <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+    );
+  },
+);
+Button.displayName = "Button";
 
-export { Button, buttonVariants }
+export { Button, buttonVariants };
diff --git a/src/application/components/ui/dialog.tsx b/src/application/components/ui/dialog.tsx
index db3a5e7..279c2de 100644
--- a/src/application/components/ui/dialog.tsx
+++ b/src/application/components/ui/dialog.tsx
@@ -1,16 +1,16 @@
-import * as React from "react"
-import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { X } from "lucide-react"
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
 
-import { cn } from "@/application/lib/utils"
+import { cn } from "@/application/lib/utils";
 
-const Dialog = DialogPrimitive.Root
+const Dialog = DialogPrimitive.Root;
 
-const DialogTrigger = DialogPrimitive.Trigger
+const DialogTrigger = DialogPrimitive.Trigger;
 
-const DialogPortal = DialogPrimitive.Portal
+const DialogPortal = DialogPrimitive.Portal;
 
-const DialogClose = DialogPrimitive.Close
+const DialogClose = DialogPrimitive.Close;
 
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
@@ -20,12 +20,12 @@ const DialogOverlay = React.forwardRef<
     ref={ref}
     className={cn(
       "fixed inset-0 z-50 bg-black/40 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      className
+      className,
     )}
     {...props}
   />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
@@ -37,7 +37,7 @@ const DialogContent = React.forwardRef<
       ref={ref}
       className={cn(
         "fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-outline-variant/60 bg-surface-container-lowest text-on-surface p-6 shadow-2xl rounded-2xl duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] overflow-hidden overscroll-contain",
-        className
+        className,
       )}
       {...props}
     >
@@ -48,36 +48,21 @@ const DialogContent = React.forwardRef<
       </DialogPrimitive.Close>
     </DialogPrimitive.Content>
   </DialogPortal>
-))
-DialogContent.displayName = DialogPrimitive.Content.displayName
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
 
-const DialogHeader = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn(
-      "flex flex-col space-y-1.5 text-center sm:text-left",
-      className
-    )}
-    {...props}
-  />
-)
-DialogHeader.displayName = "DialogHeader"
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
+);
+DialogHeader.displayName = "DialogHeader";
 
-const DialogFooter = ({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-    className={cn(
-      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
-      className
-    )}
+    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
     {...props}
   />
-)
-DialogFooter.displayName = "DialogFooter"
+);
+DialogFooter.displayName = "DialogFooter";
 
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
@@ -87,12 +72,12 @@ const DialogTitle = React.forwardRef<
     ref={ref}
     className={cn(
       "font-headline text-xl font-bold leading-tight text-on-surface tracking-tight pr-8",
-      className
+      className,
     )}
     {...props}
   />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
 const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
@@ -103,8 +88,8 @@ const DialogDescription = React.forwardRef<
     className={cn("text-sm text-on-surface-variant mt-1", className)}
     {...props}
   />
-))
-DialogDescription.displayName = DialogPrimitive.Description.displayName
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 export {
   Dialog,
@@ -117,4 +102,4 @@ export {
   DialogFooter,
   DialogTitle,
   DialogDescription,
-}
+};
diff --git a/src/application/components/ui/form.tsx b/src/application/components/ui/form.tsx
index 3914d1d..ee99b0b 100644
--- a/src/application/components/ui/form.tsx
+++ b/src/application/components/ui/form.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { Slot } from "@radix-ui/react-slot"
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
 import {
   Controller,
   FormProvider,
@@ -8,25 +8,25 @@ import {
   type ControllerProps,
   type FieldPath,
   type FieldValues,
-} from "react-hook-form"
+} from "react-hook-form";
 
-import { cn } from "@/application/lib/utils"
-import { Label } from "@/application/components/ui/label"
+import { cn } from "@/application/lib/utils";
+import { Label } from "@/application/components/ui/label";
 
-const Form = FormProvider
+const Form = FormProvider;
 
 type FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 > = {
-  name: TName
-}
+  name: TName;
+};
 
-const FormFieldContext = React.createContext<FormFieldContextValue | null>(null)
+const FormFieldContext = React.createContext<FormFieldContextValue | null>(null);
 
 const FormField = <
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
   ...props
 }: ControllerProps<TFieldValues, TName>) => {
@@ -34,25 +34,25 @@ const FormField = <
     <FormFieldContext.Provider value={{ name: props.name }}>
       <Controller {...props} />
     </FormFieldContext.Provider>
-  )
-}
+  );
+};
 
 const useFormField = () => {
-  const fieldContext = React.useContext(FormFieldContext)
-  const itemContext = React.useContext(FormItemContext)
-  const { getFieldState, formState } = useFormContext()
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
 
   if (!fieldContext) {
-    throw new Error("useFormField should be used within <FormField>")
+    throw new Error("useFormField should be used within <FormField>");
   }
 
   if (!itemContext) {
-    throw new Error("useFormField should be used within <FormItem>")
+    throw new Error("useFormField should be used within <FormItem>");
   }
 
-  const fieldState = getFieldState(fieldContext.name, formState)
+  const fieldState = getFieldState(fieldContext.name, formState);
 
-  const { id } = itemContext
+  const { id } = itemContext;
 
   return {
     id,
@@ -61,34 +61,33 @@ const useFormField = () => {
     formDescriptionId: `${id}-form-item-description`,
     formMessageId: `${id}-form-item-message`,
     ...fieldState,
-  }
-}
+  };
+};
 
 type FormItemContextValue = {
-  id: string
-}
+  id: string;
+};
 
-const FormItemContext = React.createContext<FormItemContextValue | null>(null)
+const FormItemContext = React.createContext<FormItemContextValue | null>(null);
 
-const FormItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const id = React.useId()
+const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const id = React.useId();
 
-  return (
-    <FormItemContext.Provider value={{ id }}>
-      <div ref={ref} className={cn("space-y-2", className)} {...props} />
-    </FormItemContext.Provider>
-  )
-})
-FormItem.displayName = "FormItem"
+    return (
+      <FormItemContext.Provider value={{ id }}>
+        <div ref={ref} className={cn("space-y-2", className)} {...props} />
+      </FormItemContext.Provider>
+    );
+  },
+);
+FormItem.displayName = "FormItem";
 
 const FormLabel = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
 >(({ className, ...props }, ref) => {
-  const { error, formItemId } = useFormField()
+  const { error, formItemId } = useFormField();
 
   return (
     <Label
@@ -97,37 +96,33 @@ const FormLabel = React.forwardRef<
       htmlFor={formItemId}
       {...props}
     />
-  )
-})
-FormLabel.displayName = "FormLabel"
+  );
+});
+FormLabel.displayName = "FormLabel";
 
 const FormControl = React.forwardRef<
   React.ElementRef<typeof Slot>,
   React.ComponentPropsWithoutRef<typeof Slot>
 >(({ ...props }, ref) => {
-  const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
 
   return (
     <Slot
       ref={ref}
       id={formItemId}
-      aria-describedby={
-        !error
-          ? `${formDescriptionId}`
-          : `${formDescriptionId} ${formMessageId}`
-      }
+      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
       aria-invalid={!!error}
       {...props}
     />
-  )
-})
-FormControl.displayName = "FormControl"
+  );
+});
+FormControl.displayName = "FormControl";
 
 const FormDescription = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, ...props }, ref) => {
-  const { formDescriptionId } = useFormField()
+  const { formDescriptionId } = useFormField();
 
   return (
     <p
@@ -136,19 +131,19 @@ const FormDescription = React.forwardRef<
       className={cn("text-sm text-muted-foreground", className)}
       {...props}
     />
-  )
-})
-FormDescription.displayName = "FormDescription"
+  );
+});
+FormDescription.displayName = "FormDescription";
 
 const FormMessage = React.forwardRef<
   HTMLParagraphElement,
   React.HTMLAttributes<HTMLParagraphElement>
 >(({ className, children, ...props }, ref) => {
-  const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message ?? "") : children
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message ?? "") : children;
 
   if (!body) {
-    return null
+    return null;
   }
 
   return (
@@ -160,9 +155,9 @@ const FormMessage = React.forwardRef<
     >
       {body}
     </p>
-  )
-})
-FormMessage.displayName = "FormMessage"
+  );
+});
+FormMessage.displayName = "FormMessage";
 
 export {
   useFormField,
@@ -173,4 +168,4 @@ export {
   FormDescription,
   FormMessage,
   FormField,
-}
+};
diff --git a/src/application/components/ui/input.tsx b/src/application/components/ui/input.tsx
index d71b560..26906fb 100644
--- a/src/application/components/ui/input.tsx
+++ b/src/application/components/ui/input.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/application/lib/utils"
+import { cn } from "@/application/lib/utils";
 
 const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
   ({ className, type, ...props }, ref) => {
@@ -8,15 +8,15 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-lg border border-outline-variant/60 bg-surface-container-lowest px-3 py-2 text-sm text-on-surface placeholder:text-outline placeholder:text-sm placeholder:end-with-… focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-brand/50 focus-visible:border-secondary-brand/60 transition-colors disabled:cursor-not-allowed disabled:opacity-50",
-          className
+          "flex h-10 w-full rounded-lg border border-outline-variant/60 bg-surface-container-lowest px-3 py-2 text-sm text-on-surface placeholder:text-outline placeholder:text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-brand/50 focus-visible:border-secondary-brand/60 transition-colors disabled:cursor-not-allowed disabled:opacity-50",
+          className,
         )}
         ref={ref}
         {...props}
       />
-    )
-  }
-)
-Input.displayName = "Input"
+    );
+  },
+);
+Input.displayName = "Input";
 
-export { Input }
+export { Input };
diff --git a/src/application/components/ui/label.tsx b/src/application/components/ui/label.tsx
index 9c3c451..f0855da 100644
--- a/src/application/components/ui/label.tsx
+++ b/src/application/components/ui/label.tsx
@@ -1,24 +1,19 @@
-import * as React from "react"
-import * as LabelPrimitive from "@radix-ui/react-label"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/application/lib/utils"
+import { cn } from "@/application/lib/utils";
 
 const labelVariants = cva(
-  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-)
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+);
 
 const Label = React.forwardRef<
   React.ElementRef<typeof LabelPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
-    VariantProps<typeof labelVariants>
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
 >(({ className, ...props }, ref) => (
-  <LabelPrimitive.Root
-    ref={ref}
-    className={cn(labelVariants(), className)}
-    {...props}
-  />
-))
-Label.displayName = LabelPrimitive.Root.displayName
+  <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
 
-export { Label }
+export { Label };
diff --git a/src/application/components/ui/scroll-area.tsx b/src/application/components/ui/scroll-area.tsx
index a8b0094..1c50c1d 100644
--- a/src/application/components/ui/scroll-area.tsx
+++ b/src/application/components/ui/scroll-area.tsx
@@ -1,7 +1,7 @@
-import * as React from "react"
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
 
-import { cn } from "@/application/lib/utils"
+import { cn } from "@/application/lib/utils";
 
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
@@ -18,8 +18,8 @@ const ScrollArea = React.forwardRef<
     <ScrollBar />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
-))
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
+));
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
 
 const ScrollBar = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
@@ -30,17 +30,15 @@ const ScrollBar = React.forwardRef<
     orientation={orientation}
     className={cn(
       "flex touch-none select-none transition-colors",
-      orientation === "vertical" &&
-        "h-full w-2.5 border-l border-l-transparent p-[1px]",
-      orientation === "horizontal" &&
-        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
-      className
+      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      className,
     )}
     {...props}
   >
     <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
-))
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
+));
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
-export { ScrollArea, ScrollBar }
+export { ScrollArea, ScrollBar };
diff --git a/src/application/components/ui/select.tsx b/src/application/components/ui/select.tsx
index eb4ea7c..382201c 100644
--- a/src/application/components/ui/select.tsx
+++ b/src/application/components/ui/select.tsx
@@ -1,16 +1,16 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SelectPrimitive from "@radix-ui/react-select"
-import { ChevronDown, ChevronUp } from "lucide-react"
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { ChevronDown, ChevronUp } from "lucide-react";
 
-import { cn } from "@/application/lib/utils"
+import { cn } from "@/application/lib/utils";
 
-const Select = SelectPrimitive.Root
+const Select = SelectPrimitive.Root;
 
-const SelectGroup = SelectPrimitive.Group
+const SelectGroup = SelectPrimitive.Group;
 
-const SelectValue = SelectPrimitive.Value
+const SelectValue = SelectPrimitive.Value;
 
 const SelectTrigger = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Trigger>,
@@ -20,7 +20,7 @@ const SelectTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "flex h-10 w-full items-center justify-between rounded-lg border border-outline-variant/60 bg-surface-container-lowest px-3 py-2 text-sm text-on-surface data-[placeholder]:text-outline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-brand/50 focus-visible:border-secondary-brand/60 transition-colors disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
-      className
+      className,
     )}
     {...props}
   >
@@ -29,8 +29,8 @@ const SelectTrigger = React.forwardRef<
       <ChevronDown className="h-4 w-4 opacity-60 text-on-surface-variant" aria-hidden="true" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
 const SelectScrollUpButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
@@ -40,14 +40,14 @@ const SelectScrollUpButton = React.forwardRef<
     ref={ref}
     className={cn(
       "flex cursor-default items-center justify-center py-1 text-on-surface-variant",
-      className
+      className,
     )}
     {...props}
   >
     <ChevronUp className="h-4 w-4" aria-hidden="true" />
   </SelectPrimitive.ScrollUpButton>
-))
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 
 const SelectScrollDownButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
@@ -57,15 +57,14 @@ const SelectScrollDownButton = React.forwardRef<
     ref={ref}
     className={cn(
       "flex cursor-default items-center justify-center py-1 text-on-surface-variant",
-      className
+      className,
     )}
     {...props}
   >
     <ChevronDown className="h-4 w-4" aria-hidden="true" />
   </SelectPrimitive.ScrollDownButton>
-))
-SelectScrollDownButton.displayName =
-  SelectPrimitive.ScrollDownButton.displayName
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
 
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
@@ -78,7 +77,7 @@ const SelectContent = React.forwardRef<
         "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-hidden rounded-xl border border-outline-variant/60 bg-surface-container-lowest text-on-surface shadow-2xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-select-content-transform-origin]",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1 w-[var(--radix-select-trigger-width)]",
-        className
+        className,
       )}
       position={position}
       {...props}
@@ -87,8 +86,7 @@ const SelectContent = React.forwardRef<
       <SelectPrimitive.Viewport
         className={cn(
           "p-1.5",
-          position === "popper" &&
-            "w-full min-w-[var(--radix-select-trigger-width)]"
+          position === "popper" && "w-full min-w-[var(--radix-select-trigger-width)]",
         )}
       >
         {children}
@@ -96,8 +94,8 @@ const SelectContent = React.forwardRef<
       <SelectScrollDownButton />
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
-))
-SelectContent.displayName = SelectPrimitive.Content.displayName
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
 
 const SelectLabel = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Label>,
@@ -107,12 +105,12 @@ const SelectLabel = React.forwardRef<
     ref={ref}
     className={cn(
       "py-1.5 pl-3 pr-2 text-[10px] font-bold font-headline uppercase tracking-widest text-on-surface-variant",
-      className
+      className,
     )}
     {...props}
   />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
 const SelectItem = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
@@ -122,24 +120,21 @@ const SelectItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex w-full cursor-default select-none items-center gap-2 rounded-md py-2 pl-3 pr-3 text-sm text-on-surface outline-none transition-colors focus:bg-surface-container-low focus:text-on-surface data-[state=checked]:bg-secondary-brand/5 data-[state=checked]:text-on-surface data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     {...props}
   >
     <span className="flex h-4 w-4 shrink-0 items-center justify-center text-secondary-brand">
       <SelectPrimitive.ItemIndicator>
-        <span
-          className="material-symbols-outlined text-base font-bold"
-          aria-hidden="true"
-        >
+        <span className="material-symbols-outlined text-base font-bold" aria-hidden="true">
           check
         </span>
       </SelectPrimitive.ItemIndicator>
     </span>
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
 
 const SelectSeparator = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Separator>,
@@ -150,8 +145,8 @@ const SelectSeparator = React.forwardRef<
     className={cn("-mx-1.5 my-1 h-px bg-outline-variant/30", className)}
     {...props}
   />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 export {
   Select,
@@ -164,4 +159,4 @@ export {
   SelectSeparator,
   SelectScrollUpButton,
   SelectScrollDownButton,
-}
\ No newline at end of file
+};
diff --git a/src/application/components/ui/separator.tsx b/src/application/components/ui/separator.tsx
index 344f1dd..0605de8 100644
--- a/src/application/components/ui/separator.tsx
+++ b/src/application/components/ui/separator.tsx
@@ -1,31 +1,26 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as SeparatorPrimitive from "@radix-ui/react-separator"
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
 
-import { cn } from "@/application/lib/utils"
+import { cn } from "@/application/lib/utils";
 
 const Separator = React.forwardRef<
   React.ElementRef<typeof SeparatorPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
->(
-  (
-    { className, orientation = "horizontal", decorative = true, ...props },
-    ref
-  ) => (
-    <SeparatorPrimitive.Root
-      ref={ref}
-      decorative={decorative}
-      orientation={orientation}
-      className={cn(
-        "shrink-0 bg-border",
-        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-        className
-      )}
-      {...props}
-    />
-  )
-)
-Separator.displayName = SeparatorPrimitive.Root.displayName
+>(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn(
+      "shrink-0 bg-border",
+      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+      className,
+    )}
+    {...props}
+  />
+));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
 
-export { Separator }
+export { Separator };
diff --git a/src/application/components/ui/switch.tsx b/src/application/components/ui/switch.tsx
index 4754b66..7be0645 100644
--- a/src/application/components/ui/switch.tsx
+++ b/src/application/components/ui/switch.tsx
@@ -1,7 +1,7 @@
-import * as React from "react"
-import * as SwitchPrimitives from "@radix-ui/react-switch"
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
 
-import { cn } from "@/application/lib/utils"
+import { cn } from "@/application/lib/utils";
 
 const Switch = React.forwardRef<
   React.ElementRef<typeof SwitchPrimitives.Root>,
@@ -10,18 +10,18 @@ const Switch = React.forwardRef<
   <SwitchPrimitives.Root
     className={cn(
       "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-      className
+      className,
     )}
     {...props}
     ref={ref}
   >
     <SwitchPrimitives.Thumb
       className={cn(
-        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
       )}
     />
   </SwitchPrimitives.Root>
-))
-Switch.displayName = SwitchPrimitives.Root.displayName
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
 
-export { Switch }
+export { Switch };
diff --git a/src/application/components/ui/tabs.tsx b/src/application/components/ui/tabs.tsx
index b180c2a..45c7922 100644
--- a/src/application/components/ui/tabs.tsx
+++ b/src/application/components/ui/tabs.tsx
@@ -1,11 +1,11 @@
-"use client"
+"use client";
 
-import * as React from "react"
-import * as TabsPrimitive from "@radix-ui/react-tabs"
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
 
-import { cn } from "@/application/lib/utils"
+import { cn } from "@/application/lib/utils";
 
-const Tabs = TabsPrimitive.Root
+const Tabs = TabsPrimitive.Root;
 
 const TabsList = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.List>,
@@ -15,12 +15,12 @@ const TabsList = React.forwardRef<
     ref={ref}
     className={cn(
       "inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground",
-      className
+      className,
     )}
     {...props}
   />
-))
-TabsList.displayName = TabsPrimitive.List.displayName
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
 
 const TabsTrigger = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Trigger>,
@@ -30,12 +30,12 @@ const TabsTrigger = React.forwardRef<
     ref={ref}
     className={cn(
       "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm",
-      className
+      className,
     )}
     {...props}
   />
-))
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
 
 const TabsContent = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Content>,
@@ -45,11 +45,11 @@ const TabsContent = React.forwardRef<
     ref={ref}
     className={cn(
       "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className
+      className,
     )}
     {...props}
   />
-))
-TabsContent.displayName = TabsPrimitive.Content.displayName
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
 
-export { Tabs, TabsList, TabsTrigger, TabsContent }
+export { Tabs, TabsList, TabsTrigger, TabsContent };
diff --git a/src/application/components/ui/textarea.tsx b/src/application/components/ui/textarea.tsx
index 7de19b7..b595a72 100644
--- a/src/application/components/ui/textarea.tsx
+++ b/src/application/components/ui/textarea.tsx
@@ -1,22 +1,21 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/application/lib/utils"
+import { cn } from "@/application/lib/utils";
 
-const Textarea = React.forwardRef<
-  HTMLTextAreaElement,
-  React.ComponentProps<"textarea">
->(({ className, ...props }, ref) => {
-  return (
-    <textarea
-      className={cn(
-        "flex min-h-[80px] w-full rounded-lg border border-outline-variant/60 bg-surface-container-lowest px-3 py-2 text-sm text-on-surface placeholder:text-outline placeholder:text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-brand/50 focus-visible:border-secondary-brand/60 transition-colors disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      )}
-      ref={ref}
-      {...props}
-    />
-  )
-})
-Textarea.displayName = "Textarea"
+const Textarea = React.forwardRef<HTMLTextAreaElement, React.ComponentProps<"textarea">>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-lg border border-outline-variant/60 bg-surface-container-lowest px-3 py-2 text-sm text-on-surface placeholder:text-outline placeholder:text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-secondary-brand/50 focus-visible:border-secondary-brand/60 transition-colors disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Textarea.displayName = "Textarea";
 
-export { Textarea }
+export { Textarea };
diff --git a/src/application/hooks/chat/useSendMessage.ts b/src/application/hooks/chat/useSendMessage.ts
index 84c39b4..da80d1c 100644
--- a/src/application/hooks/chat/useSendMessage.ts
+++ b/src/application/hooks/chat/useSendMessage.ts
@@ -7,8 +7,7 @@ export function useSendMessage(threadId: string | null) {
 
   return useMutation({
     mutationFn: (request: ChatRequest) => {
-      if (!threadId)
-        throw new Error("Cannot send message without an active thread");
+      if (!threadId) throw new Error("Cannot send message without an active thread");
       return chatApi.sendMessage(threadId, request);
     },
     onSuccess: () => {
diff --git a/src/application/hooks/chat/useStreamChat.ts b/src/application/hooks/chat/useStreamChat.ts
index f607980..6a4d192 100644
--- a/src/application/hooks/chat/useStreamChat.ts
+++ b/src/application/hooks/chat/useStreamChat.ts
@@ -41,8 +41,7 @@ export function useStreamChat(threadId: string | null) {
               queryKey: ["messages", threadId],
             });
           } finally {
-            const { setPendingUserMessage, setStreaming } =
-              useChatStore.getState();
+            const { setPendingUserMessage, setStreaming } = useChatStore.getState();
             setPendingUserMessage(null);
             setStreaming(false);
           }
@@ -50,9 +49,7 @@ export function useStreamChat(threadId: string | null) {
         (error) => {
           console.error("Stream error:", error);
           useChatStore.getState().setStreaming(false);
-          useChatStore.getState().setError(
-            error.message || "An error occurred while streaming.",
-          );
+          useChatStore.getState().setError(error.message || "An error occurred while streaming.");
         },
       );
     },
diff --git a/src/application/hooks/rag/useClassicalIndexFile.ts b/src/application/hooks/rag/useClassicalIndexFile.ts
index 7110409..8c9015f 100644
--- a/src/application/hooks/rag/useClassicalIndexFile.ts
+++ b/src/application/hooks/rag/useClassicalIndexFile.ts
@@ -23,4 +23,4 @@ export function useClassicalIndexFile() {
       toast.error(error.message || "Failed to start classical file indexing");
     },
   });
-}
\ No newline at end of file
+}
diff --git a/src/application/hooks/rag/useClassicalIndexFolder.ts b/src/application/hooks/rag/useClassicalIndexFolder.ts
index a3ec5a0..1b74b71 100644
--- a/src/application/hooks/rag/useClassicalIndexFolder.ts
+++ b/src/application/hooks/rag/useClassicalIndexFolder.ts
@@ -25,4 +25,4 @@ export function useClassicalIndexFolder() {
       toast.error(error.message || "Failed to start classical folder indexing");
     },
   });
-}
\ No newline at end of file
+}
diff --git a/src/application/hooks/rag/useIndexFile.ts b/src/application/hooks/rag/useIndexFile.ts
index 136dafc..d1b3211 100644
--- a/src/application/hooks/rag/useIndexFile.ts
+++ b/src/application/hooks/rag/useIndexFile.ts
@@ -16,4 +16,4 @@ export function useIndexFile() {
       toast.error(error.message || "Failed to start file indexing");
     },
   });
-}
\ No newline at end of file
+}
diff --git a/src/application/hooks/rag/useIndexFolder.ts b/src/application/hooks/rag/useIndexFolder.ts
index 7f93d4c..b2d05ff 100644
--- a/src/application/hooks/rag/useIndexFolder.ts
+++ b/src/application/hooks/rag/useIndexFolder.ts
@@ -4,11 +4,7 @@ import { ragIndexApi } from "@/infrastructure/api/rag/ragIndexApi";
 
 export function useIndexFolder() {
   return useMutation({
-    mutationFn: (request: {
-      workingDir: string;
-      recursive: boolean;
-      fileExtensions?: string[];
-    }) =>
+    mutationFn: (request: { workingDir: string; recursive: boolean; fileExtensions?: string[] }) =>
       ragIndexApi.indexFolder({
         working_dir: request.workingDir,
         recursive: request.recursive,
@@ -21,4 +17,4 @@ export function useIndexFolder() {
       toast.error(error.message || "Failed to start folder indexing");
     },
   });
-}
\ No newline at end of file
+}
diff --git a/src/application/hooks/rag/useRagQuery.ts b/src/application/hooks/rag/useRagQuery.ts
index 522f735..2d49ae4 100644
--- a/src/application/hooks/rag/useRagQuery.ts
+++ b/src/application/hooks/rag/useRagQuery.ts
@@ -4,12 +4,7 @@ import type { QueryMode } from "@/domain/entities/rag/queryRequest";
 
 export function useRagQuery() {
   return useMutation({
-    mutationFn: (request: {
-      workingDir: string;
-      query: string;
-      mode: QueryMode;
-      topK: number;
-    }) =>
+    mutationFn: (request: { workingDir: string; query: string; mode: QueryMode; topK: number }) =>
       ragQueryApi.queryLightRAG({
         working_dir: request.workingDir,
         query: request.query,
diff --git a/src/application/hooks/rag/useReadFile.ts b/src/application/hooks/rag/useReadFile.ts
index 641e145..7fdbd69 100644
--- a/src/application/hooks/rag/useReadFile.ts
+++ b/src/application/hooks/rag/useReadFile.ts
@@ -9,4 +9,4 @@ export function useReadFile() {
       toast.error(error.message || "Failed to read file content");
     },
   });
-}
\ No newline at end of file
+}
diff --git a/src/application/lib/formatFileSize.ts b/src/application/lib/formatFileSize.ts
index ec1d4e8..9364e44 100644
--- a/src/application/lib/formatFileSize.ts
+++ b/src/application/lib/formatFileSize.ts
@@ -3,7 +3,6 @@ export function formatFileSize(bytes: number): string {
   if (bytes === 0) return "0 B";
   if (bytes < 1024) return `${bytes} B`;
   if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
-  if (bytes < 1024 * 1024 * 1024)
-    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
   return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
 }
diff --git a/src/application/lib/yaml.ts b/src/application/lib/yaml.ts
index b606a2e..e78e1aa 100644
--- a/src/application/lib/yaml.ts
+++ b/src/application/lib/yaml.ts
@@ -22,9 +22,7 @@ function cleanSubagent(sub: AgentConfig["subagents"][number]): PlainRecord {
   return result;
 }
 
-function cleanMcpServer(
-  server: AgentConfig["mcp_servers"][number],
-): PlainRecord {
+function cleanMcpServer(server: AgentConfig["mcp_servers"][number]): PlainRecord {
   const result: PlainRecord = {
     name: server.name,
     transport: server.transport,
@@ -61,10 +59,7 @@ export function serializeAgentConfig(config: AgentConfig): string {
   if (config.system_prompt_file) {
     clean.system_prompt_file = config.system_prompt_file;
   }
-  if (
-    config.response_format &&
-    Object.keys(config.response_format).length > 0
-  ) {
+  if (config.response_format && Object.keys(config.response_format).length > 0) {
     clean.response_format = config.response_format;
   }
 
@@ -91,10 +86,7 @@ export function parseAgentConfig(yamlString: string): AgentConfig {
   return agentConfigSchema.parse(raw);
 }
 
-export function agentConfigToYamlFile(
-  config: AgentConfig,
-  filename?: string,
-): File {
+export function agentConfigToYamlFile(config: AgentConfig, filename?: string): File {
   const yamlContent = serializeAgentConfig(config);
   const safeName = config.name.replaceAll(/[^a-z0-9_-]/gi, "_");
   const name = filename ?? `${safeName}.yaml`;
diff --git a/src/application/pages/AgentsPage.tsx b/src/application/pages/AgentsPage.tsx
index 2e803c1..b3e66ff 100644
--- a/src/application/pages/AgentsPage.tsx
+++ b/src/application/pages/AgentsPage.tsx
@@ -19,8 +19,8 @@ export default function AgentsPage() {
                 Active Agents
               </h1>
               <p className="text-on-surface-variant text-sm max-w-md">
-                Configure and manage your AI agent fleet. Each agent operates
-                with its own tools, middleware, and orchestration rules.
+                Configure and manage your AI agent fleet. Each agent operates with its own tools,
+                middleware, and orchestration rules.
               </p>
             </div>
             <button
@@ -28,8 +28,7 @@ export default function AgentsPage() {
               onClick={() => setCreateDialogOpen(true)}
               className="flex items-center gap-3 bg-primary-container text-white rounded-full px-8 py-4 font-headline text-xs font-bold uppercase tracking-widest hover:opacity-90 transition-opacity shrink-0"
             >
-              <span className="material-symbols-outlined text-lg">add_circle</span>{" "}
-              Create Agent
+              <span className="material-symbols-outlined text-lg">add_circle</span> Create Agent
             </button>
           </div>
 
@@ -42,10 +41,7 @@ export default function AgentsPage() {
       </div>
 
       {/* Dialogs */}
-      <CreateAgentDialog
-        open={createDialogOpen}
-        onOpenChange={setCreateDialogOpen}
-      />
+      <CreateAgentDialog open={createDialogOpen} onOpenChange={setCreateDialogOpen} />
       {viewerAgent && (
         <AgentConfigViewer
           agentName={viewerAgent}
diff --git a/src/application/pages/ChatPage.tsx b/src/application/pages/ChatPage.tsx
index acfae8a..96faa25 100644
--- a/src/application/pages/ChatPage.tsx
+++ b/src/application/pages/ChatPage.tsx
@@ -38,8 +38,8 @@ export default function ChatPage() {
               Orchestration Console
             </h2>
             <p className="text-on-surface-variant text-sm max-w-sm mx-auto">
-              Select a thread from the sidebar or start a new conversation to
-              begin orchestrating your agents.
+              Select a thread from the sidebar or start a new conversation to begin orchestrating
+              your agents.
             </p>
           </div>
         </div>
diff --git a/src/application/pages/RagPage.tsx b/src/application/pages/RagPage.tsx
index 6164079..fef57ae 100644
--- a/src/application/pages/RagPage.tsx
+++ b/src/application/pages/RagPage.tsx
@@ -42,10 +42,7 @@ export default function RagPage() {
   const classicalIndexFolder = useClassicalIndexFolder();
   const readFile = useReadFile();
 
-  const segments = useMemo(
-    () => prefixToSegments(currentPrefix),
-    [currentPrefix],
-  );
+  const segments = useMemo(() => prefixToSegments(currentPrefix), [currentPrefix]);
 
   const foldersQuery = useFolders(currentPrefix);
   const filesQuery = useFiles(currentPrefix, false);
@@ -83,7 +80,12 @@ export default function RagPage() {
   const handleFileIndexClassical = (objectName: string) => {
     const dir = workingDir || currentPrefix;
     if (!dir) return;
-    classicalIndexFile.mutate({ fileName: objectName, workingDir: dir, chunkSize: DEFAULT_CHUNK_SIZE, chunkOverlap: DEFAULT_CHUNK_OVERLAP });
+    classicalIndexFile.mutate({
+      fileName: objectName,
+      workingDir: dir,
+      chunkSize: DEFAULT_CHUNK_SIZE,
+      chunkOverlap: DEFAULT_CHUNK_OVERLAP,
+    });
   };
 
   const handleFolderIndexLightRAG = (prefix: string) => {
@@ -95,15 +97,18 @@ export default function RagPage() {
   const handleFolderIndexClassical = (prefix: string) => {
     const dir = workingDir || prefix;
     if (!dir) return;
-    classicalIndexFolder.mutate({ workingDir: dir, recursive: true, chunkSize: DEFAULT_CHUNK_SIZE, chunkOverlap: DEFAULT_CHUNK_OVERLAP });
+    classicalIndexFolder.mutate({
+      workingDir: dir,
+      recursive: true,
+      chunkSize: DEFAULT_CHUNK_SIZE,
+      chunkOverlap: DEFAULT_CHUNK_OVERLAP,
+    });
   };
 
   const isLoading = foldersQuery.isLoading || filesQuery.isLoading;
   const error = foldersQuery.error || filesQuery.error;
 
-  const folderSuggestions = (workspaceFoldersQuery.data ?? []).map(
-    (f) => f.prefix,
-  );
+  const folderSuggestions = (workspaceFoldersQuery.data ?? []).map((f) => f.prefix);
 
   return (
     <MainLayout showSidebar={false}>
@@ -111,18 +116,13 @@ export default function RagPage() {
         <div className="max-w-[1440px] mx-auto px-8 py-12">
           <div className="flex items-start justify-between mb-12">
             <div>
-              <h1 className="font-headline text-5xl font-bold text-on-surface mb-3">
-                RAG Storage
-              </h1>
+              <h1 className="font-headline text-5xl font-bold text-on-surface mb-3">RAG Storage</h1>
               <p className="text-on-surface-variant text-sm max-w-md">
                 Browse and manage your RAG knowledge base.
               </p>
             </div>
             {activeTab === "browse" && (
-              <UploadButton
-                prefix={currentPrefix}
-                onUploadComplete={handleUploadComplete}
-              />
+              <UploadButton prefix={currentPrefix} onUploadComplete={handleUploadComplete} />
             )}
           </div>
 
@@ -173,13 +173,11 @@ export default function RagPage() {
                 onChange={setWorkingDir}
                 folders={folderSuggestions}
               />
-              <QueryPanel
-                workingDir={workingDir}
-              />
+              <QueryPanel workingDir={workingDir} />
             </>
           )}
         </div>
       </div>
     </MainLayout>
   );
-}
\ No newline at end of file
+}
diff --git a/src/application/stores/useChatStore.ts b/src/application/stores/useChatStore.ts
index c15ab69..75d225d 100644
--- a/src/application/stores/useChatStore.ts
+++ b/src/application/stores/useChatStore.ts
@@ -52,11 +52,7 @@ export const useChatStore = create<ChatState>((set) => ({
             const msg = JSON.parse(ev.data);
             return { structuredResponse: msg.structured_response ?? null };
           } catch (e) {
-            console.warn(
-              "[ChatStore] Failed to parse message event data:",
-              ev.data,
-              e,
-            );
+            console.warn("[ChatStore] Failed to parse message event data:", ev.data, e);
             return state;
           }
         default:
@@ -75,6 +71,5 @@ export const useChatStore = create<ChatState>((set) => ({
   setStreaming: (streaming) => set({ isStreaming: streaming }),
   setPendingUserMessage: (msg) => set({ pendingUserMessage: msg }),
   setError: (msg) => set({ error: msg }),
-  toggleStreaming: () =>
-    set((state) => ({ useStreaming: !state.useStreaming })),
+  toggleStreaming: () => set((state) => ({ useStreaming: !state.useStreaming })),
 }));
diff --git a/src/domain/entities/agent/agentConfigSchema.ts b/src/domain/entities/agent/agentConfigSchema.ts
index f512724..f745417 100644
--- a/src/domain/entities/agent/agentConfigSchema.ts
+++ b/src/domain/entities/agent/agentConfigSchema.ts
@@ -12,7 +12,12 @@ export const hitlConfigSchema = z.object({
 });
 
 export const backendConfigSchema = z.object({
-  type: z.enum([BackendType.STATE, BackendType.STORE, BackendType.FILESYSTEM, BackendType.COMPOSITE]),
+  type: z.enum([
+    BackendType.STATE,
+    BackendType.STORE,
+    BackendType.FILESYSTEM,
+    BackendType.COMPOSITE,
+  ]),
   root_dir: z.string().nullable().optional(),
 });
 
@@ -39,17 +44,20 @@ export const subAgentConfigSchema = z.object({
 });
 
 export const agentConfigSchema = z.object({
-  name: z.string().min(1, "Agent name is required").max(100, "Agent name must be 100 characters or less").regex(/^[a-zA-Z0-9._-]+$/, "Agent name must contain only alphanumeric characters, dots, hyphens, and underscores"),
+  name: z
+    .string()
+    .min(1, "Agent name is required")
+    .max(100, "Agent name must be 100 characters or less")
+    .regex(
+      /^[a-zA-Z0-9._-]+$/,
+      "Agent name must contain only alphanumeric characters, dots, hyphens, and underscores",
+    ),
   model: z.string().min(1, "Model is required"),
   system_prompt: z.string().nullable().optional(),
   system_prompt_file: z.string().nullable().optional(),
   tools: z.array(z.string()),
   middleware: z
-    .enum([
-      MiddlewareType.TODO_LIST,
-      MiddlewareType.FILESYSTEM,
-      MiddlewareType.SUB_AGENT,
-    ])
+    .enum([MiddlewareType.TODO_LIST, MiddlewareType.FILESYSTEM, MiddlewareType.SUB_AGENT])
     .array(),
   backend: backendConfigSchema,
   hitl: hitlConfigSchema,
diff --git a/src/domain/entities/rag/fileContent.ts b/src/domain/entities/rag/fileContent.ts
index 8ed0357..d5125ad 100644
--- a/src/domain/entities/rag/fileContent.ts
+++ b/src/domain/entities/rag/fileContent.ts
@@ -12,4 +12,4 @@ export interface FileContentResponse {
   content: string;
   metadata: DocumentMetadata;
   tables: TableData[];
-}
\ No newline at end of file
+}
diff --git a/src/domain/entities/rag/indexingRequest.ts b/src/domain/entities/rag/indexingRequest.ts
index a851530..fc0cf21 100644
--- a/src/domain/entities/rag/indexingRequest.ts
+++ b/src/domain/entities/rag/indexingRequest.ts
@@ -22,4 +22,4 @@ export interface ClassicalIndexFolderRequest {
   file_extensions?: string[];
   chunk_size: number;
   chunk_overlap: number;
-}
\ No newline at end of file
+}
diff --git a/src/domain/entities/rag/queryRequest.ts b/src/domain/entities/rag/queryRequest.ts
index 60b09ac..460ac34 100644
--- a/src/domain/entities/rag/queryRequest.ts
+++ b/src/domain/entities/rag/queryRequest.ts
@@ -27,4 +27,3 @@ export interface ClassicalQueryRequest {
   enable_llm_judge: boolean;
   mode: ClassicalQueryMode;
 }
-
diff --git a/src/domain/ports/rag/ragFileContentPort.ts b/src/domain/ports/rag/ragFileContentPort.ts
index 667baa8..647abbc 100644
--- a/src/domain/ports/rag/ragFileContentPort.ts
+++ b/src/domain/ports/rag/ragFileContentPort.ts
@@ -2,4 +2,4 @@ import type { FileContentResponse } from "@/domain/entities/rag/fileContent";
 
 export interface IRagFileContentPort {
   readFile(filePath: string): Promise<FileContentResponse>;
-}
\ No newline at end of file
+}
diff --git a/src/domain/ports/rag/ragIndexPort.ts b/src/domain/ports/rag/ragIndexPort.ts
index c15f804..c68ca4f 100644
--- a/src/domain/ports/rag/ragIndexPort.ts
+++ b/src/domain/ports/rag/ragIndexPort.ts
@@ -8,6 +8,10 @@ import type {
 export interface IRagIndexPort {
   indexFile(request: IndexFileRequest): Promise<{ status: string; message: string }>;
   indexFolder(request: IndexFolderRequest): Promise<{ status: string; message: string }>;
-  indexFileClassical(request: ClassicalIndexFileRequest): Promise<{ status: string; message: string }>;
-  indexFolderClassical(request: ClassicalIndexFolderRequest): Promise<{ status: string; message: string }>;
-}
\ No newline at end of file
+  indexFileClassical(
+    request: ClassicalIndexFileRequest,
+  ): Promise<{ status: string; message: string }>;
+  indexFolderClassical(
+    request: ClassicalIndexFolderRequest,
+  ): Promise<{ status: string; message: string }>;
+}
diff --git a/src/domain/ports/rag/ragQueryPort.ts b/src/domain/ports/rag/ragQueryPort.ts
index b8733bb..16a5dd0 100644
--- a/src/domain/ports/rag/ragQueryPort.ts
+++ b/src/domain/ports/rag/ragQueryPort.ts
@@ -1,4 +1,7 @@
-import type { LightRAGQueryRequest, ClassicalQueryRequest } from "@/domain/entities/rag/queryRequest";
+import type {
+  LightRAGQueryRequest,
+  ClassicalQueryRequest,
+} from "@/domain/entities/rag/queryRequest";
 import type { ChunkResponse } from "@/domain/entities/rag/chunkResponse";
 import type { ClassicalQueryResponse } from "@/domain/entities/rag/classicalQueryResponse";
 
diff --git a/src/infrastructure/api/agent/agentApi.ts b/src/infrastructure/api/agent/agentApi.ts
index 281cdec..b9a98a4 100644
--- a/src/infrastructure/api/agent/agentApi.ts
+++ b/src/infrastructure/api/agent/agentApi.ts
@@ -5,15 +5,12 @@ import { apiClient } from "@/infrastructure/api/axiosInstance";
 
 export const agentApi: IAgentPort = {
   async listAgents(): Promise<AgentConfigMetadata[]> {
-    const response =
-      await apiClient.get<AgentConfigMetadata[]>("/api/v1/agents");
+    const response = await apiClient.get<AgentConfigMetadata[]>("/api/v1/agents");
     return response.data;
   },
 
   async getAgent(name: string): Promise<AgentConfig> {
-    const response = await apiClient.get<AgentConfig>(
-      `/api/v1/agents/${encodeURIComponent(name)}`,
-    );
+    const response = await apiClient.get<AgentConfig>(`/api/v1/agents/${encodeURIComponent(name)}`);
     return response.data;
   },
 
@@ -22,13 +19,9 @@ export const agentApi: IAgentPort = {
     formData.append("agent_name", name);
     formData.append("file", yamlFile);
 
-    const response = await apiClient.post<AgentConfig>(
-      "/api/v1/agents",
-      formData,
-      {
-        headers: { "Content-Type": "multipart/form-data" },
-      },
-    );
+    const response = await apiClient.post<AgentConfig>("/api/v1/agents", formData, {
+      headers: { "Content-Type": "multipart/form-data" },
+    });
     return response.data;
   },
 
diff --git a/src/infrastructure/api/chat/chatApi.ts b/src/infrastructure/api/chat/chatApi.ts
index 13ea78e..8ca2fa8 100644
--- a/src/infrastructure/api/chat/chatApi.ts
+++ b/src/infrastructure/api/chat/chatApi.ts
@@ -41,18 +41,14 @@ export const chatApi: IChatPort = {
   },
 
   async getMessages(threadId: string): Promise<Message[]> {
-    const response = await apiClient.get<Message[]>(
-      `/api/v1/threads/${threadId}/messages`,
-    );
+    const response = await apiClient.get<Message[]>(`/api/v1/threads/${threadId}/messages`);
     return response.data;
   },
 
   async sendMessage(threadId: string, request: ChatRequest): Promise<Message> {
-    const response = await apiClient.post<Message>(
-      `/api/v1/chat/${threadId}`,
-      request,
-      { timeout: 300000 },
-    );
+    const response = await apiClient.post<Message>(`/api/v1/chat/${threadId}`, request, {
+      timeout: 300000,
+    });
     return response.data;
   },
 
diff --git a/src/infrastructure/api/rag/ragFileContentApi.ts b/src/infrastructure/api/rag/ragFileContentApi.ts
index bf97406..0fbb43c 100644
--- a/src/infrastructure/api/rag/ragFileContentApi.ts
+++ b/src/infrastructure/api/rag/ragFileContentApi.ts
@@ -20,4 +20,4 @@ export const ragFileContentApi: IRagFileContentPort = {
       tables,
     };
   },
-};
\ No newline at end of file
+};
diff --git a/src/infrastructure/api/rag/ragIndexApi.ts b/src/infrastructure/api/rag/ragIndexApi.ts
index 0c22225..97efad0 100644
--- a/src/infrastructure/api/rag/ragIndexApi.ts
+++ b/src/infrastructure/api/rag/ragIndexApi.ts
@@ -3,10 +3,13 @@ import type { IRagIndexPort } from "@/domain/ports/rag/ragIndexPort";
 
 export const ragIndexApi: IRagIndexPort = {
   async indexFile(request) {
-    const response = await ragApiClient.post<{ status: string; message: string }>("/api/v1/file/index", {
-      file_name: request.file_name,
-      working_dir: request.working_dir,
-    });
+    const response = await ragApiClient.post<{ status: string; message: string }>(
+      "/api/v1/file/index",
+      {
+        file_name: request.file_name,
+        working_dir: request.working_dir,
+      },
+    );
     return {
       status: response.data.status,
       message: response.data.message,
@@ -21,7 +24,10 @@ export const ragIndexApi: IRagIndexPort = {
     if (request.file_extensions) {
       body.file_extensions = request.file_extensions;
     }
-    const response = await ragApiClient.post<{ status: string; message: string }>("/api/v1/folder/index", body);
+    const response = await ragApiClient.post<{ status: string; message: string }>(
+      "/api/v1/folder/index",
+      body,
+    );
     return {
       status: response.data.status,
       message: response.data.message,
@@ -29,12 +35,15 @@ export const ragIndexApi: IRagIndexPort = {
   },
 
   async indexFileClassical(request) {
-    const response = await ragApiClient.post<{ status: string; message: string }>("/api/v1/classical/file/index", {
-      file_name: request.file_name,
-      working_dir: request.working_dir,
-      chunk_size: request.chunk_size,
-      chunk_overlap: request.chunk_overlap,
-    });
+    const response = await ragApiClient.post<{ status: string; message: string }>(
+      "/api/v1/classical/file/index",
+      {
+        file_name: request.file_name,
+        working_dir: request.working_dir,
+        chunk_size: request.chunk_size,
+        chunk_overlap: request.chunk_overlap,
+      },
+    );
     return {
       status: response.data.status,
       message: response.data.message,
@@ -51,10 +60,13 @@ export const ragIndexApi: IRagIndexPort = {
     if (request.file_extensions) {
       body.file_extensions = request.file_extensions;
     }
-    const response = await ragApiClient.post<{ status: string; message: string }>("/api/v1/classical/folder/index", body);
+    const response = await ragApiClient.post<{ status: string; message: string }>(
+      "/api/v1/classical/folder/index",
+      body,
+    );
     return {
       status: response.data.status,
       message: response.data.message,
     };
   },
-};
\ No newline at end of file
+};
diff --git a/tests/fixtures/external.ts b/tests/fixtures/external.ts
index 7a96aa0..102988c 100644
--- a/tests/fixtures/external.ts
+++ b/tests/fixtures/external.ts
@@ -4,11 +4,7 @@ import type { AgentConfigMetadata } from "@/domain/entities/agent/agentConfigMet
 import type { McpServerConfig } from "@/domain/entities/agent/mcpServerConfig";
 import { McpTransportType } from "@/domain/entities/agent/mcpServerConfig";
 import { Thread } from "@/domain/entities/chat/thread";
-import {
-  Message,
-  MessageRole,
-  MessageStatus,
-} from "@/domain/entities/chat/message";
+import { Message, MessageRole, MessageStatus } from "@/domain/entities/chat/message";
 
 export function createAgentConfigMetadata(
   overrides: Partial<AgentConfigMetadata> = {},
@@ -35,9 +31,7 @@ export function createThread(overrides: Partial<Thread> = {}): Thread {
   };
 }
 
-export function createAgentConfig(
-  overrides: Partial<AgentConfig> = {},
-): AgentConfig {
+export function createAgentConfig(overrides: Partial<AgentConfig> = {}): AgentConfig {
   return {
     name: "test-agent",
     model: "openai:anthropic/claude-haiku-4.5:nitro",
@@ -55,9 +49,7 @@ export function createAgentConfig(
   };
 }
 
-export function createMcpServerConfig(
-  overrides: Partial<McpServerConfig> = {},
-): McpServerConfig {
+export function createMcpServerConfig(overrides: Partial<McpServerConfig> = {}): McpServerConfig {
   return {
     name: "fs-server",
     transport: McpTransportType.STDIO,
diff --git a/tests/fixtures/rag.ts b/tests/fixtures/rag.ts
index d025c35..1c770a9 100644
--- a/tests/fixtures/rag.ts
+++ b/tests/fixtures/rag.ts
@@ -8,9 +8,7 @@ export interface FolderEntryFixture {
   prefix: string;
 }
 
-export function createFileEntry(
-  overrides: Partial<FileEntryFixture> = {},
-): FileEntryFixture {
+export function createFileEntry(overrides: Partial<FileEntryFixture> = {}): FileEntryFixture {
   return {
     objectName: "docs/readme.md",
     size: 1024,
@@ -19,9 +17,7 @@ export function createFileEntry(
   };
 }
 
-export function createFolderEntry(
-  overrides: Partial<FolderEntryFixture> = {},
-): FolderEntryFixture {
+export function createFolderEntry(overrides: Partial<FolderEntryFixture> = {}): FolderEntryFixture {
   return {
     prefix: "docs/",
     ...overrides,
diff --git a/tests/unit/application/App.test.tsx b/tests/unit/application/App.test.tsx
new file mode 100644
index 0000000..20ba4ff
--- /dev/null
+++ b/tests/unit/application/App.test.tsx
@@ -0,0 +1,40 @@
+import { screen } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { renderWithProviders } from "../../utils/render";
+
+// Mock route components so App renders without real lazy imports.
+vi.mock("@/application/pages/ChatPage", () => ({
+  default: () => <div>ChatPage</div>,
+}));
+
+vi.mock("@/application/pages/AgentsPage", () => ({
+  default: () => <div>AgentsPage</div>,
+}));
+
+vi.mock("@/application/pages/RagPage", () => ({
+  default: () => <div>RagPage</div>,
+}));
+
+import { PageFallback } from "@/application/App";
+
+describe("PageFallback — a11y", () => {
+  it("renders with role=status", () => {
+    renderWithProviders(<PageFallback />);
+
+    const status = screen.getByRole("status");
+    expect(status).toBeInTheDocument();
+  });
+
+  it("has aria-live=polite for screen reader announcements", () => {
+    renderWithProviders(<PageFallback />);
+
+    const status = screen.getByRole("status");
+    expect(status).toHaveAttribute("aria-live", "polite");
+  });
+
+  it("displays 'Loading…' text for users", () => {
+    renderWithProviders(<PageFallback />);
+
+    expect(screen.getByText(/loading/i)).toBeInTheDocument();
+  });
+});
diff --git a/tests/unit/application/lib/yaml.test.ts b/tests/unit/application/lib/yaml.test.ts
index f17cf33..aa14568 100644
--- a/tests/unit/application/lib/yaml.test.ts
+++ b/tests/unit/application/lib/yaml.test.ts
@@ -5,10 +5,7 @@ import {
   agentConfigToYamlFile,
 } from "@/application/lib/yaml";
 import type { AgentConfig } from "@/domain/entities/agent/agentConfig";
-import {
-  BackendType,
-  MiddlewareType,
-} from "@/domain/entities/agent/agentConfig";
+import { BackendType, MiddlewareType } from "@/domain/entities/agent/agentConfig";
 import { McpTransportType } from "@/domain/entities/agent/mcpServerConfig";
 
 const fullConfig: AgentConfig = {
diff --git a/tests/unit/components/agent/AgentConfigForm.test.tsx b/tests/unit/components/agent/AgentConfigForm.test.tsx
index 1f0815b..4bcf5ec 100644
--- a/tests/unit/components/agent/AgentConfigForm.test.tsx
+++ b/tests/unit/components/agent/AgentConfigForm.test.tsx
@@ -13,11 +13,7 @@ describe("AgentConfigForm", () => {
   describe("create mode", () => {
     it("renders form with sections", () => {
       renderWithProviders(
-        <AgentConfigForm
-          mode="create"
-          onSubmit={mockSubmit}
-          onCancel={mockCancel}
-        />,
+        <AgentConfigForm mode="create" onSubmit={mockSubmit} onCancel={mockCancel} />,
       );
 
       expect(screen.getByText("General")).toBeInTheDocument();
@@ -27,11 +23,7 @@ describe("AgentConfigForm", () => {
 
     it("renders name field enabled in create mode", () => {
       renderWithProviders(
-        <AgentConfigForm
-          mode="create"
-          onSubmit={mockSubmit}
-          onCancel={mockCancel}
-        />,
+        <AgentConfigForm mode="create" onSubmit={mockSubmit} onCancel={mockCancel} />,
       );
 
       const nameInput = screen.getByLabelText(/agent name/i);
@@ -41,11 +33,7 @@ describe("AgentConfigForm", () => {
 
     it("renders model and debug fields", () => {
       renderWithProviders(
-        <AgentConfigForm
-          mode="create"
-          onSubmit={mockSubmit}
-          onCancel={mockCancel}
-        />,
+        <AgentConfigForm mode="create" onSubmit={mockSubmit} onCancel={mockCancel} />,
       );
 
       expect(screen.getByLabelText(/model/i)).toBeInTheDocument();
@@ -53,27 +41,17 @@ describe("AgentConfigForm", () => {
 
     it("renders cancel button", () => {
       renderWithProviders(
-        <AgentConfigForm
-          mode="create"
-          onSubmit={mockSubmit}
-          onCancel={mockCancel}
-        />,
+        <AgentConfigForm mode="create" onSubmit={mockSubmit} onCancel={mockCancel} />,
       );
 
-      expect(
-        screen.getByRole("button", { name: /cancel/i }),
-      ).toBeInTheDocument();
+      expect(screen.getByRole("button", { name: /cancel/i })).toBeInTheDocument();
     });
 
     it("calls onCancel when cancel button is clicked", async () => {
       const user = userEvent.setup();
 
       renderWithProviders(
-        <AgentConfigForm
-          mode="create"
-          onSubmit={mockSubmit}
-          onCancel={mockCancel}
-        />,
+        <AgentConfigForm mode="create" onSubmit={mockSubmit} onCancel={mockCancel} />,
       );
 
       await user.click(screen.getByRole("button", { name: /cancel/i }));
@@ -82,16 +60,10 @@ describe("AgentConfigForm", () => {
 
     it("shows create button in create mode", () => {
       renderWithProviders(
-        <AgentConfigForm
-          mode="create"
-          onSubmit={mockSubmit}
-          onCancel={mockCancel}
-        />,
+        <AgentConfigForm mode="create" onSubmit={mockSubmit} onCancel={mockCancel} />,
       );
 
-      expect(
-        screen.getByRole("button", { name: /create/i }),
-      ).toBeInTheDocument();
+      expect(screen.getByRole("button", { name: /create/i })).toBeInTheDocument();
     });
   });
 
@@ -121,9 +93,7 @@ describe("AgentConfigForm", () => {
         />,
       );
 
-      const nameInput = screen.getByLabelText(
-        /agent name/i,
-      ) as HTMLInputElement;
+      const nameInput = screen.getByLabelText(/agent name/i) as HTMLInputElement;
       expect(nameInput).toBeDisabled();
     });
 
@@ -137,9 +107,7 @@ describe("AgentConfigForm", () => {
         />,
       );
 
-      const nameInput = screen.getByLabelText(
-        /agent name/i,
-      ) as HTMLInputElement;
+      const nameInput = screen.getByLabelText(/agent name/i) as HTMLInputElement;
       expect(nameInput.value).toBe("existing-agent");
 
       const modelInput = screen.getByLabelText(/model/i) as HTMLInputElement;
@@ -156,12 +124,8 @@ describe("AgentConfigForm", () => {
         />,
       );
 
-      expect(
-        screen.getByRole("button", { name: /update/i }),
-      ).toBeInTheDocument();
-      expect(
-        screen.queryByRole("button", { name: /create/i }),
-      ).not.toBeInTheDocument();
+      expect(screen.getByRole("button", { name: /update/i })).toBeInTheDocument();
+      expect(screen.queryByRole("button", { name: /create/i })).not.toBeInTheDocument();
     });
   });
 });
diff --git a/tests/unit/components/agent/AgentConfigViewer.test.tsx b/tests/unit/components/agent/AgentConfigViewer.test.tsx
index 1c715c0..f88641d 100644
--- a/tests/unit/components/agent/AgentConfigViewer.test.tsx
+++ b/tests/unit/components/agent/AgentConfigViewer.test.tsx
@@ -4,23 +4,18 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 import { renderWithProviders } from "../../../utils/render";
 import AgentConfigViewer from "@/application/components/agent/AgentConfigViewer";
 import type { AgentConfig } from "@/domain/entities/agent/agentConfig";
-import {
-  BackendType,
-  MiddlewareType,
-} from "@/domain/entities/agent/agentConfig";
-
-const { mockAgentConfigData, mockDeleteMutate, mockUpdateMutate } = vi.hoisted(
-  () => {
-    return {
-      mockAgentConfigData: {
-        data: undefined as AgentConfig | undefined,
-        isLoading: false,
-      },
-      mockDeleteMutate: vi.fn(),
-      mockUpdateMutate: vi.fn(),
-    };
-  },
-);
+import { BackendType, MiddlewareType } from "@/domain/entities/agent/agentConfig";
+
+const { mockAgentConfigData, mockDeleteMutate, mockUpdateMutate } = vi.hoisted(() => {
+  return {
+    mockAgentConfigData: {
+      data: undefined as AgentConfig | undefined,
+      isLoading: false,
+    },
+    mockDeleteMutate: vi.fn(),
+    mockUpdateMutate: vi.fn(),
+  };
+});
 
 vi.mock("@/application/hooks/agent/useAgentConfig", () => ({
   useAgentConfig: () => mockAgentConfigData,
@@ -55,8 +50,7 @@ vi.mock("@/application/lib/yaml", () => ({
 const fullConfig: AgentConfig = {
   name: "test-agent",
   model: "openai:gpt-4o",
-  system_prompt:
-    "You are a helpful assistant that provides accurate information.",
+  system_prompt: "You are a helpful assistant that provides accurate information.",
   tools: ["search", "calculator"],
   middleware: [],
   backend: { type: "state" as BackendType },
@@ -78,11 +72,7 @@ describe("AgentConfigViewer", () => {
 
   it("returns null when open is false", () => {
     const { container } = renderWithProviders(
-      <AgentConfigViewer
-        agentName="test-agent"
-        open={false}
-        onOpenChange={vi.fn()}
-      />,
+      <AgentConfigViewer agentName="test-agent" open={false} onOpenChange={vi.fn()} />,
     );
 
     expect(container.innerHTML).toBe("");
@@ -92,11 +82,7 @@ describe("AgentConfigViewer", () => {
     mockAgentConfigData.data = fullConfig;
 
     renderWithProviders(
-      <AgentConfigViewer
-        agentName="test-agent"
-        open={true}
-        onOpenChange={vi.fn()}
-      />,
+      <AgentConfigViewer agentName="test-agent" open={true} onOpenChange={vi.fn()} />,
     );
 
     expect(screen.getByText("test-agent")).toBeInTheDocument();
@@ -106,11 +92,7 @@ describe("AgentConfigViewer", () => {
     mockAgentConfigData.isLoading = true;
 
     renderWithProviders(
-      <AgentConfigViewer
-        agentName="test-agent"
-        open={true}
-        onOpenChange={vi.fn()}
-      />,
+      <AgentConfigViewer agentName="test-agent" open={true} onOpenChange={vi.fn()} />,
     );
 
     expect(screen.getByText("Loading configuration…")).toBeInTheDocument();
@@ -120,11 +102,7 @@ describe("AgentConfigViewer", () => {
     mockAgentConfigData.data = fullConfig;
 
     renderWithProviders(
-      <AgentConfigViewer
-        agentName="test-agent"
-        open={true}
-        onOpenChange={vi.fn()}
-      />,
+      <AgentConfigViewer agentName="test-agent" open={true} onOpenChange={vi.fn()} />,
     );
 
     expect(screen.getByText("openai:gpt-4o")).toBeInTheDocument();
@@ -134,11 +112,7 @@ describe("AgentConfigViewer", () => {
     mockAgentConfigData.data = fullConfig;
 
     renderWithProviders(
-      <AgentConfigViewer
-        agentName="test-agent"
-        open={true}
-        onOpenChange={vi.fn()}
-      />,
+      <AgentConfigViewer agentName="test-agent" open={true} onOpenChange={vi.fn()} />,
     );
 
     expect(screen.getByText("search")).toBeInTheDocument();
@@ -150,11 +124,7 @@ describe("AgentConfigViewer", () => {
     mockAgentConfigData.data = fullConfig;
 
     renderWithProviders(
-      <AgentConfigViewer
-        agentName="test-agent"
-        open={true}
-        onOpenChange={vi.fn()}
-      />,
+      <AgentConfigViewer agentName="test-agent" open={true} onOpenChange={vi.fn()} />,
     );
 
     expect(screen.getByText(/state/)).toBeInTheDocument();
@@ -165,11 +135,7 @@ describe("AgentConfigViewer", () => {
     const user = userEvent.setup();
 
     renderWithProviders(
-      <AgentConfigViewer
-        agentName="test-agent"
-        open={true}
-        onOpenChange={vi.fn()}
-      />,
+      <AgentConfigViewer agentName="test-agent" open={true} onOpenChange={vi.fn()} />,
     );
 
     const deleteButton = screen.getByRole("button", { name: /^delete$/i });
@@ -177,20 +143,14 @@ describe("AgentConfigViewer", () => {
 
     await user.click(deleteButton);
 
-    expect(
-      screen.getByRole("button", { name: /confirm delete/i }),
-    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /confirm delete/i })).toBeInTheDocument();
   });
 
   it("renders debug status badge", () => {
     mockAgentConfigData.data = fullConfig;
 
     renderWithProviders(
-      <AgentConfigViewer
-        agentName="test-agent"
-        open={true}
-        onOpenChange={vi.fn()}
-      />,
+      <AgentConfigViewer agentName="test-agent" open={true} onOpenChange={vi.fn()} />,
     );
 
     expect(screen.getByText("Off")).toBeInTheDocument();
@@ -203,11 +163,7 @@ describe("AgentConfigViewer", () => {
     };
 
     renderWithProviders(
-      <AgentConfigViewer
-        agentName="test-agent"
-        open={true}
-        onOpenChange={vi.fn()}
-      />,
+      <AgentConfigViewer agentName="test-agent" open={true} onOpenChange={vi.fn()} />,
     );
 
     expect(screen.getByText("Middleware (2)")).toBeInTheDocument();
@@ -222,11 +178,7 @@ describe("AgentConfigViewer", () => {
     };
 
     renderWithProviders(
-      <AgentConfigViewer
-        agentName="test-agent"
-        open={true}
-        onOpenChange={vi.fn()}
-      />,
+      <AgentConfigViewer agentName="test-agent" open={true} onOpenChange={vi.fn()} />,
     );
 
     expect(screen.getByText("HITL Rules")).toBeInTheDocument();
@@ -251,11 +203,7 @@ describe("AgentConfigViewer", () => {
     };
 
     renderWithProviders(
-      <AgentConfigViewer
-        agentName="test-agent"
-        open={true}
-        onOpenChange={vi.fn()}
-      />,
+      <AgentConfigViewer agentName="test-agent" open={true} onOpenChange={vi.fn()} />,
     );
 
     expect(screen.getByText("MCP Servers (1)")).toBeInTheDocument();
@@ -278,11 +226,7 @@ describe("AgentConfigViewer", () => {
     };
 
     renderWithProviders(
-      <AgentConfigViewer
-        agentName="test-agent"
-        open={true}
-        onOpenChange={vi.fn()}
-      />,
+      <AgentConfigViewer agentName="test-agent" open={true} onOpenChange={vi.fn()} />,
     );
 
     expect(screen.getByText("Subagents (1)")).toBeInTheDocument();
@@ -297,11 +241,7 @@ describe("AgentConfigViewer", () => {
     };
 
     renderWithProviders(
-      <AgentConfigViewer
-        agentName="test-agent"
-        open={true}
-        onOpenChange={vi.fn()}
-      />,
+      <AgentConfigViewer agentName="test-agent" open={true} onOpenChange={vi.fn()} />,
     );
 
     expect(screen.getByText(/\/data\/agents/)).toBeInTheDocument();
@@ -316,11 +256,7 @@ describe("AgentConfigViewer", () => {
     const user = userEvent.setup();
 
     renderWithProviders(
-      <AgentConfigViewer
-        agentName="test-agent"
-        open={true}
-        onOpenChange={vi.fn()}
-      />,
+      <AgentConfigViewer agentName="test-agent" open={true} onOpenChange={vi.fn()} />,
     );
 
     const showMoreBtn = screen.getByRole("button", { name: /show more/i });
@@ -335,11 +271,7 @@ describe("AgentConfigViewer", () => {
     const user = userEvent.setup();
 
     renderWithProviders(
-      <AgentConfigViewer
-        agentName="test-agent"
-        open={true}
-        onOpenChange={vi.fn()}
-      />,
+      <AgentConfigViewer agentName="test-agent" open={true} onOpenChange={vi.fn()} />,
     );
 
     await user.click(screen.getByRole("button", { name: /^delete$/i }));
@@ -358,11 +290,7 @@ describe("AgentConfigViewer", () => {
     mockAgentConfigData.data = { ...fullConfig, debug: true };
 
     renderWithProviders(
-      <AgentConfigViewer
-        agentName="test-agent"
-        open={true}
-        onOpenChange={vi.fn()}
-      />,
+      <AgentConfigViewer agentName="test-agent" open={true} onOpenChange={vi.fn()} />,
     );
 
     expect(screen.getByText("Active")).toBeInTheDocument();
@@ -372,11 +300,7 @@ describe("AgentConfigViewer", () => {
     mockAgentConfigData.data = fullConfig;
 
     renderWithProviders(
-      <AgentConfigViewer
-        agentName="test-agent"
-        open={true}
-        onOpenChange={vi.fn()}
-      />,
+      <AgentConfigViewer agentName="test-agent" open={true} onOpenChange={vi.fn()} />,
     );
 
     expect(screen.getByRole("button", { name: /edit/i })).toBeInTheDocument();
@@ -386,15 +310,9 @@ describe("AgentConfigViewer", () => {
     mockAgentConfigData.data = fullConfig;
 
     renderWithProviders(
-      <AgentConfigViewer
-        agentName="test-agent"
-        open={true}
-        onOpenChange={vi.fn()}
-      />,
+      <AgentConfigViewer agentName="test-agent" open={true} onOpenChange={vi.fn()} />,
     );
 
-    expect(
-      screen.getByRole("button", { name: /export yaml/i }),
-    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /export yaml/i })).toBeInTheDocument();
   });
 });
diff --git a/tests/unit/components/agent/AgentGrid.test.tsx b/tests/unit/components/agent/AgentGrid.test.tsx
index f9b9896..7fd2af0 100644
--- a/tests/unit/components/agent/AgentGrid.test.tsx
+++ b/tests/unit/components/agent/AgentGrid.test.tsx
@@ -19,9 +19,7 @@ describe("AgentGrid", () => {
       error: null,
     } as ReturnType<typeof useAgents>);
 
-    renderWithProviders(
-      <AgentGrid onCreateNew={vi.fn()} onConfigure={vi.fn()} />,
-    );
+    renderWithProviders(<AgentGrid onCreateNew={vi.fn()} onConfigure={vi.fn()} />);
 
     expect(screen.getByText("Loading agents...")).toBeInTheDocument();
   });
@@ -37,9 +35,7 @@ describe("AgentGrid", () => {
       error: null,
     } as ReturnType<typeof useAgents>);
 
-    renderWithProviders(
-      <AgentGrid onCreateNew={vi.fn()} onConfigure={vi.fn()} />,
-    );
+    renderWithProviders(<AgentGrid onCreateNew={vi.fn()} onConfigure={vi.fn()} />);
 
     expect(screen.getByText("agent-alpha")).toBeInTheDocument();
     expect(screen.getByText("agent-beta")).toBeInTheDocument();
@@ -52,9 +48,7 @@ describe("AgentGrid", () => {
       error: null,
     } as ReturnType<typeof useAgents>);
 
-    renderWithProviders(
-      <AgentGrid onCreateNew={vi.fn()} onConfigure={vi.fn()} />,
-    );
+    renderWithProviders(<AgentGrid onCreateNew={vi.fn()} onConfigure={vi.fn()} />);
 
     expect(screen.getByText("New Agent Template")).toBeInTheDocument();
   });
@@ -68,9 +62,7 @@ describe("AgentGrid", () => {
     } as ReturnType<typeof useAgents>);
     const onCreateNew = vi.fn();
 
-    renderWithProviders(
-      <AgentGrid onCreateNew={onCreateNew} onConfigure={vi.fn()} />,
-    );
+    renderWithProviders(<AgentGrid onCreateNew={onCreateNew} onConfigure={vi.fn()} />);
 
     await user.click(screen.getByText("New Agent Template"));
 
diff --git a/tests/unit/components/agent/CreateAgentDialog.test.tsx b/tests/unit/components/agent/CreateAgentDialog.test.tsx
index c239adf..d6a99b6 100644
--- a/tests/unit/components/agent/CreateAgentDialog.test.tsx
+++ b/tests/unit/components/agent/CreateAgentDialog.test.tsx
@@ -47,29 +47,21 @@ describe("CreateAgentDialog", () => {
   });
 
   it("renders dialog title when open", () => {
-    renderWithProviders(
-      <CreateAgentDialog open={true} onOpenChange={vi.fn()} />,
-    );
+    renderWithProviders(<CreateAgentDialog open={true} onOpenChange={vi.fn()} />);
 
     // The dialog title is a heading; the visible Submit button also says "Create Agent" so target heading.
-    expect(
-      screen.getByRole("heading", { name: /create agent/i, level: 2 }),
-    ).toBeInTheDocument();
+    expect(screen.getByRole("heading", { name: /create agent/i, level: 2 })).toBeInTheDocument();
   });
 
   it("has form and yaml tabs", () => {
-    renderWithProviders(
-      <CreateAgentDialog open={true} onOpenChange={vi.fn()} />,
-    );
+    renderWithProviders(<CreateAgentDialog open={true} onOpenChange={vi.fn()} />);
 
     expect(screen.getByText("Form")).toBeInTheDocument();
     expect(screen.getByText("Upload YAML")).toBeInTheDocument();
   });
 
   it("defaults to form tab", () => {
-    renderWithProviders(
-      <CreateAgentDialog open={true} onOpenChange={vi.fn()} />,
-    );
+    renderWithProviders(<CreateAgentDialog open={true} onOpenChange={vi.fn()} />);
 
     expect(screen.getByLabelText(/agent name/i)).toBeInTheDocument();
   });
@@ -77,9 +69,7 @@ describe("CreateAgentDialog", () => {
   it("switches to yaml tab and shows file input", async () => {
     const user = userEvent.setup();
 
-    renderWithProviders(
-      <CreateAgentDialog open={true} onOpenChange={vi.fn()} />,
-    );
+    renderWithProviders(<CreateAgentDialog open={true} onOpenChange={vi.fn()} />);
 
     await user.click(screen.getByText("Upload YAML"));
 
@@ -90,9 +80,7 @@ describe("CreateAgentDialog", () => {
     const user = userEvent.setup();
     const onOpenChange = vi.fn();
 
-    renderWithProviders(
-      <CreateAgentDialog open={true} onOpenChange={onOpenChange} />,
-    );
+    renderWithProviders(<CreateAgentDialog open={true} onOpenChange={onOpenChange} />);
 
     await user.click(screen.getByText("Upload YAML"));
     await user.click(screen.getByRole("button", { name: /cancel/i }));
diff --git a/tests/unit/components/agent/KeyValueEditor.test.tsx b/tests/unit/components/agent/KeyValueEditor.test.tsx
index a37a6b4..7cde848 100644
--- a/tests/unit/components/agent/KeyValueEditor.test.tsx
+++ b/tests/unit/components/agent/KeyValueEditor.test.tsx
@@ -71,9 +71,7 @@ describe("KeyValueEditor", () => {
       />,
     );
 
-    await user.click(
-      screen.getByRole("button", { name: /remove authorization/i }),
-    );
+    await user.click(screen.getByRole("button", { name: /remove authorization/i }));
 
     expect(onChange).toHaveBeenCalledWith({});
   });
diff --git a/tests/unit/components/agent/McpServerEditor.test.tsx b/tests/unit/components/agent/McpServerEditor.test.tsx
index 66f972b..a6e0855 100644
--- a/tests/unit/components/agent/McpServerEditor.test.tsx
+++ b/tests/unit/components/agent/McpServerEditor.test.tsx
@@ -27,11 +27,7 @@ const httpServer: McpServerConfig = {
 describe("McpServerEditor", () => {
   it("renders server name field", () => {
     renderWithProviders(
-      <McpServerEditor
-        value={stdioServer}
-        onChange={vi.fn()}
-        onRemove={vi.fn()}
-      />,
+      <McpServerEditor value={stdioServer} onChange={vi.fn()} onRemove={vi.fn()} />,
     );
 
     expect(screen.getByLabelText(/name/i)).toBeInTheDocument();
@@ -40,11 +36,7 @@ describe("McpServerEditor", () => {
 
   it("shows command field for stdio transport", () => {
     renderWithProviders(
-      <McpServerEditor
-        value={stdioServer}
-        onChange={vi.fn()}
-        onRemove={vi.fn()}
-      />,
+      <McpServerEditor value={stdioServer} onChange={vi.fn()} onRemove={vi.fn()} />,
     );
 
     expect(screen.getByLabelText(/command/i)).toBeInTheDocument();
@@ -53,11 +45,7 @@ describe("McpServerEditor", () => {
 
   it("shows url field for http transport", () => {
     renderWithProviders(
-      <McpServerEditor
-        value={httpServer}
-        onChange={vi.fn()}
-        onRemove={vi.fn()}
-      />,
+      <McpServerEditor value={httpServer} onChange={vi.fn()} onRemove={vi.fn()} />,
     );
 
     expect(screen.getByLabelText(/url/i)).toBeInTheDocument();
@@ -69,11 +57,7 @@ describe("McpServerEditor", () => {
     const onRemove = vi.fn();
 
     renderWithProviders(
-      <McpServerEditor
-        value={stdioServer}
-        onChange={vi.fn()}
-        onRemove={onRemove}
-      />,
+      <McpServerEditor value={stdioServer} onChange={vi.fn()} onRemove={onRemove} />,
     );
 
     await user.click(screen.getByRole("button", { name: /remove server/i }));
diff --git a/tests/unit/components/agent/StringListEditor.test.tsx b/tests/unit/components/agent/StringListEditor.test.tsx
index b2109b0..a20959d 100644
--- a/tests/unit/components/agent/StringListEditor.test.tsx
+++ b/tests/unit/components/agent/StringListEditor.test.tsx
@@ -22,12 +22,7 @@ describe("StringListEditor", () => {
 
   it("renders input with placeholder", () => {
     renderWithProviders(
-      <StringListEditor
-        label="Skills"
-        value={[]}
-        onChange={vi.fn()}
-        placeholder="Add skill..."
-      />,
+      <StringListEditor label="Skills" value={[]} onChange={vi.fn()} placeholder="Add skill..." />,
     );
 
     expect(screen.getByPlaceholderText("Add skill...")).toBeInTheDocument();
diff --git a/tests/unit/components/agent/SubAgentEditor.test.tsx b/tests/unit/components/agent/SubAgentEditor.test.tsx
index ee7078b..425f87f 100644
--- a/tests/unit/components/agent/SubAgentEditor.test.tsx
+++ b/tests/unit/components/agent/SubAgentEditor.test.tsx
@@ -16,11 +16,7 @@ const minimalSubAgent: SubAgentConfig = {
 describe("SubAgentEditor", () => {
   it("renders name and description fields", () => {
     renderWithProviders(
-      <SubAgentEditor
-        value={minimalSubAgent}
-        onChange={vi.fn()}
-        onRemove={vi.fn()}
-      />,
+      <SubAgentEditor value={minimalSubAgent} onChange={vi.fn()} onRemove={vi.fn()} />,
     );
 
     expect(screen.getByLabelText(/name/i)).toBeInTheDocument();
@@ -32,11 +28,7 @@ describe("SubAgentEditor", () => {
     const onRemove = vi.fn();
 
     renderWithProviders(
-      <SubAgentEditor
-        value={minimalSubAgent}
-        onChange={vi.fn()}
-        onRemove={onRemove}
-      />,
+      <SubAgentEditor value={minimalSubAgent} onChange={vi.fn()} onRemove={onRemove} />,
     );
 
     await user.click(screen.getByRole("button", { name: /remove subagent/i }));
@@ -45,11 +37,7 @@ describe("SubAgentEditor", () => {
 
   it("renders tools and skills sections", () => {
     renderWithProviders(
-      <SubAgentEditor
-        value={minimalSubAgent}
-        onChange={vi.fn()}
-        onRemove={vi.fn()}
-      />,
+      <SubAgentEditor value={minimalSubAgent} onChange={vi.fn()} onRemove={vi.fn()} />,
     );
 
     expect(screen.getByText("Tools")).toBeInTheDocument();
@@ -63,11 +51,7 @@ describe("SubAgentEditor", () => {
     };
 
     renderWithProviders(
-      <SubAgentEditor
-        value={withInstructions}
-        onChange={vi.fn()}
-        onRemove={vi.fn()}
-      />,
+      <SubAgentEditor value={withInstructions} onChange={vi.fn()} onRemove={vi.fn()} />,
     );
 
     expect(screen.getByLabelText(/instructions/i)).toBeInTheDocument();
diff --git a/tests/unit/components/chat/ChatInput.test.tsx b/tests/unit/components/chat/ChatInput.test.tsx
index 70f8672..d0f3df4 100644
--- a/tests/unit/components/chat/ChatInput.test.tsx
+++ b/tests/unit/components/chat/ChatInput.test.tsx
@@ -47,9 +47,7 @@ describe("ChatInput", () => {
   it("renders input with correct placeholder", () => {
     renderWithProviders(<ChatInput threadId="thread-1" />);
 
-    expect(
-      screen.getByPlaceholderText("Orchestrate your next move..."),
-    ).toBeInTheDocument();
+    expect(screen.getByPlaceholderText("Orchestrate your next move...")).toBeInTheDocument();
   });
 
   it("has a send button", () => {
@@ -63,9 +61,7 @@ describe("ChatInput", () => {
 
     renderWithProviders(<ChatInput threadId="thread-1" />);
 
-    const textarea = screen.getByPlaceholderText(
-      "Orchestrate your next move...",
-    );
+    const textarea = screen.getByPlaceholderText("Orchestrate your next move...");
     await user.type(textarea, "Hello agent");
     await user.click(screen.getByRole("button", { name: /send/i }));
 
@@ -80,9 +76,7 @@ describe("ChatInput", () => {
 
     renderWithProviders(<ChatInput threadId="thread-1" />);
 
-    const textarea = screen.getByPlaceholderText(
-      "Orchestrate your next move...",
-    );
+    const textarea = screen.getByPlaceholderText("Orchestrate your next move...");
     await user.type(textarea, "Enter message");
     await user.keyboard("{Enter}");
 
@@ -97,9 +91,7 @@ describe("ChatInput", () => {
 
     renderWithProviders(<ChatInput threadId="thread-1" />);
 
-    const textarea = screen.getByPlaceholderText(
-      "Orchestrate your next move...",
-    );
+    const textarea = screen.getByPlaceholderText("Orchestrate your next move...");
     await user.type(textarea, "Line 1");
     await user.keyboard("{Shift>}{Enter}{/Shift}");
 
@@ -121,9 +113,7 @@ describe("ChatInput", () => {
 
     renderWithProviders(<ChatInput threadId="thread-1" />);
 
-    const textarea = screen.getByPlaceholderText(
-      "Orchestrate your next move...",
-    );
+    const textarea = screen.getByPlaceholderText("Orchestrate your next move...");
     await user.type(textarea, "Standard message");
     await user.click(screen.getByRole("button", { name: /send/i }));
 
@@ -147,9 +137,7 @@ describe("ChatInput", () => {
 
     renderWithProviders(<ChatInput threadId="thread-1" />);
 
-    const textarea = screen.getByPlaceholderText(
-      "Orchestrate your next move...",
-    );
+    const textarea = screen.getByPlaceholderText("Orchestrate your next move...");
     expect(textarea).toBeDisabled();
 
     mockStoreState.isStreaming = false;
diff --git a/tests/unit/components/chat/ChatMessage.test.tsx b/tests/unit/components/chat/ChatMessage.test.tsx
index de6af4c..02aac05 100644
--- a/tests/unit/components/chat/ChatMessage.test.tsx
+++ b/tests/unit/components/chat/ChatMessage.test.tsx
@@ -1,5 +1,5 @@
 import { screen } from "@testing-library/react";
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, vi } from "vitest";
 import { renderWithProviders } from "../../../utils/render";
 import ChatMessage from "@/application/components/chat/ChatMessage";
 import { createMessage } from "../../../fixtures/external";
@@ -12,9 +12,7 @@ describe("ChatMessage", () => {
       content: "Hello from the agent",
     });
 
-    renderWithProviders(
-      <ChatMessage message={message} agentName="research-bot" />,
-    );
+    renderWithProviders(<ChatMessage message={message} agentName="research-bot" />);
 
     expect(screen.getByText("research-bot")).toBeInTheDocument();
     expect(screen.getByText("Hello from the agent")).toBeInTheDocument();
@@ -27,9 +25,7 @@ describe("ChatMessage", () => {
       status: null,
     });
 
-    renderWithProviders(
-      <ChatMessage message={message} agentName="test-agent" />,
-    );
+    renderWithProviders(<ChatMessage message={message} agentName="test-agent" />);
 
     expect(screen.getByText("What is the weather?")).toBeInTheDocument();
   });
@@ -41,9 +37,7 @@ describe("ChatMessage", () => {
       status: MessageStatus.AWAITING_HITL,
     });
 
-    renderWithProviders(
-      <ChatMessage message={message} agentName="test-agent" />,
-    );
+    renderWithProviders(<ChatMessage message={message} agentName="test-agent" />);
 
     expect(screen.getByText("Awaiting Hitl")).toBeInTheDocument();
   });
@@ -54,11 +48,84 @@ describe("ChatMessage", () => {
       content: "This is **bold** text",
     });
 
-    renderWithProviders(
-      <ChatMessage message={message} agentName="test-agent" />,
-    );
+    renderWithProviders(<ChatMessage message={message} agentName="test-agent" />);
 
     const boldElement = screen.getByText("bold");
     expect(boldElement.tagName).toBe("STRONG");
   });
+
+  // ─── Memoization: committed messages should not re-render ────────────────
+
+  it("does not re-render when parent rerenders with same message ref", () => {
+    const message = createMessage({
+      role: MessageRole.AI,
+      content: "Committed message",
+    });
+
+    const renderSpy = vi.fn(() => null);
+
+    function Parent() {
+      return (
+        <div>
+          <ChatMessage message={message} agentName="test-agent" />
+          {renderSpy()}
+        </div>
+      );
+    }
+
+    const { rerender } = renderWithProviders(<Parent />);
+
+    expect(screen.getByText("Committed message")).toBeInTheDocument();
+    expect(renderSpy).toHaveBeenCalledTimes(1);
+
+    // Re-render the parent with a different element tree but the same message ref.
+    rerender(<Parent />);
+
+    // The Parent's render spy fires again (parent re-rendered), but ChatMessage
+    // is memoized — its internal implementation should not re-execute.
+    // We verify the spy fired again (proving the parent did re-render) and that
+    // the message content is still present.
+    expect(renderSpy).toHaveBeenCalledTimes(2);
+    expect(screen.getByText("Committed message")).toBeInTheDocument();
+  });
+
+  it("re-renders when a new message object is passed (different ref)", () => {
+    const message1 = createMessage({
+      role: MessageRole.AI,
+      content: "First message",
+    });
+    const message2 = createMessage({
+      role: MessageRole.AI,
+      content: "Second message",
+    });
+
+    const { rerender } = renderWithProviders(
+      <ChatMessage message={message1} agentName="test-agent" />,
+    );
+
+    expect(screen.getByText("First message")).toBeInTheDocument();
+
+    rerender(<ChatMessage message={message2} agentName="test-agent" />);
+
+    expect(screen.getByText("Second message")).toBeInTheDocument();
+    expect(screen.queryByText("First message")).not.toBeInTheDocument();
+  });
+
+  it("re-renders when agentName changes (same message ref)", () => {
+    const message = createMessage({
+      role: MessageRole.AI,
+      content: "Same message",
+    });
+
+    const { rerender } = renderWithProviders(
+      <ChatMessage message={message} agentName="agent-one" />,
+    );
+
+    expect(screen.getByText("agent-one")).toBeInTheDocument();
+
+    rerender(<ChatMessage message={message} agentName="agent-two" />);
+
+    expect(screen.getByText("agent-two")).toBeInTheDocument();
+    expect(screen.queryByText("agent-one")).not.toBeInTheDocument();
+  });
 });
diff --git a/tests/unit/components/chat/HITLReviewPanel.test.tsx b/tests/unit/components/chat/HITLReviewPanel.test.tsx
index 0a607f0..0499ac4 100644
--- a/tests/unit/components/chat/HITLReviewPanel.test.tsx
+++ b/tests/unit/components/chat/HITLReviewPanel.test.tsx
@@ -32,27 +32,19 @@ describe("HITLReviewPanel", () => {
   });
 
   it("renders tool name in idle state", () => {
-    renderWithProviders(
-      <HITLReviewPanel toolCalls={toolCalls} threadId="thread-123" />,
-    );
+    renderWithProviders(<HITLReviewPanel toolCalls={toolCalls} threadId="thread-123" />);
 
     expect(screen.getByText("create_file")).toBeInTheDocument();
   });
 
   it("shows 'Review Data' button in idle state", () => {
-    renderWithProviders(
-      <HITLReviewPanel toolCalls={toolCalls} threadId="thread-123" />,
-    );
+    renderWithProviders(<HITLReviewPanel toolCalls={toolCalls} threadId="thread-123" />);
 
-    expect(
-      screen.getByRole("button", { name: /review data/i }),
-    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /review data/i })).toBeInTheDocument();
   });
 
   it("shows validation required text", () => {
-    renderWithProviders(
-      <HITLReviewPanel toolCalls={toolCalls} threadId="thread-123" />,
-    );
+    renderWithProviders(<HITLReviewPanel toolCalls={toolCalls} threadId="thread-123" />);
 
     expect(screen.getByText(/validation required/i)).toBeInTheDocument();
   });
@@ -60,16 +52,12 @@ describe("HITLReviewPanel", () => {
   it("transitions to reviewing state when Review Data is clicked", async () => {
     const user = userEvent.setup();
 
-    renderWithProviders(
-      <HITLReviewPanel toolCalls={toolCalls} threadId="thread-123" />,
-    );
+    renderWithProviders(<HITLReviewPanel toolCalls={toolCalls} threadId="thread-123" />);
 
     await user.click(screen.getByRole("button", { name: /review data/i }));
 
     // In reviewing state, Approve and Reject buttons should appear
-    expect(
-      screen.getByRole("button", { name: /approve/i }),
-    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /approve/i })).toBeInTheDocument();
     expect(screen.getByRole("button", { name: /reject/i })).toBeInTheDocument();
     expect(screen.getByRole("button", { name: /cancel/i })).toBeInTheDocument();
   });
@@ -77,9 +65,7 @@ describe("HITLReviewPanel", () => {
   it("shows tool args in reviewing state", async () => {
     const user = userEvent.setup();
 
-    renderWithProviders(
-      <HITLReviewPanel toolCalls={toolCalls} threadId="thread-123" />,
-    );
+    renderWithProviders(<HITLReviewPanel toolCalls={toolCalls} threadId="thread-123" />);
 
     await user.click(screen.getByRole("button", { name: /review data/i }));
 
@@ -89,9 +75,7 @@ describe("HITLReviewPanel", () => {
   it("calls sendMessage with approve action when Approve is clicked", async () => {
     const user = userEvent.setup();
 
-    renderWithProviders(
-      <HITLReviewPanel toolCalls={toolCalls} threadId="thread-123" />,
-    );
+    renderWithProviders(<HITLReviewPanel toolCalls={toolCalls} threadId="thread-123" />);
 
     await user.click(screen.getByRole("button", { name: /review data/i }));
     await user.click(screen.getByRole("button", { name: /approve/i }));
@@ -105,42 +89,30 @@ describe("HITLReviewPanel", () => {
   it("transitions to rejecting state on first Reject click", async () => {
     const user = userEvent.setup();
 
-    renderWithProviders(
-      <HITLReviewPanel toolCalls={toolCalls} threadId="thread-123" />,
-    );
+    renderWithProviders(<HITLReviewPanel toolCalls={toolCalls} threadId="thread-123" />);
 
     await user.click(screen.getByRole("button", { name: /review data/i }));
     await user.click(screen.getByRole("button", { name: /^reject$/i }));
 
     // Should now show "Confirm Reject" and a reason input
-    expect(
-      screen.getByRole("button", { name: /confirm reject/i }),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByPlaceholderText(/reason for rejection/i),
-    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /confirm reject/i })).toBeInTheDocument();
+    expect(screen.getByPlaceholderText(/reason for rejection/i)).toBeInTheDocument();
   });
 
   it("returns to idle state when Cancel is clicked", async () => {
     const user = userEvent.setup();
 
-    renderWithProviders(
-      <HITLReviewPanel toolCalls={toolCalls} threadId="thread-123" />,
-    );
+    renderWithProviders(<HITLReviewPanel toolCalls={toolCalls} threadId="thread-123" />);
 
     await user.click(screen.getByRole("button", { name: /review data/i }));
     await user.click(screen.getByRole("button", { name: /cancel/i }));
 
     // Should be back to idle with "Review Data" button
-    expect(
-      screen.getByRole("button", { name: /review data/i }),
-    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /review data/i })).toBeInTheDocument();
   });
 
   it("handles empty tool calls gracefully", () => {
-    renderWithProviders(
-      <HITLReviewPanel toolCalls={[]} threadId="thread-123" />,
-    );
+    renderWithProviders(<HITLReviewPanel toolCalls={[]} threadId="thread-123" />);
 
     expect(screen.getByText("Unknown tool")).toBeInTheDocument();
   });
diff --git a/tests/unit/components/layout/MainLayout.test.tsx b/tests/unit/components/layout/MainLayout.test.tsx
index ba7e5f7..48ee45f 100644
--- a/tests/unit/components/layout/MainLayout.test.tsx
+++ b/tests/unit/components/layout/MainLayout.test.tsx
@@ -2,32 +2,24 @@ import { screen } from "@testing-library/react";
 import { describe, it, expect, vi } from "vitest";
 import { renderWithProviders } from "../../../utils/render";
 import MainLayout from "@/application/components/layout/MainLayout";
-import {
-  createThread,
-  createAgentConfigMetadata,
-} from "../../../fixtures/external";
-
-const {
-  mockThreadsData,
-  mockAgentsData,
-  mockCreateThreadMutate,
-  mockSetActiveThread,
-} = vi.hoisted(() => {
-  return {
-    mockThreadsData: {
-      data: undefined as ReturnType<typeof createThread>[] | undefined,
-      isLoading: false,
-    },
-    mockAgentsData: {
-      data: undefined as
-        | ReturnType<typeof createAgentConfigMetadata>[]
-        | undefined,
-      isLoading: false,
-    },
-    mockCreateThreadMutate: vi.fn(),
-    mockSetActiveThread: vi.fn(),
-  };
-});
+import { createThread, createAgentConfigMetadata } from "../../../fixtures/external";
+
+const { mockThreadsData, mockAgentsData, mockCreateThreadMutate, mockSetActiveThread } = vi.hoisted(
+  () => {
+    return {
+      mockThreadsData: {
+        data: undefined as ReturnType<typeof createThread>[] | undefined,
+        isLoading: false,
+      },
+      mockAgentsData: {
+        data: undefined as ReturnType<typeof createAgentConfigMetadata>[] | undefined,
+        isLoading: false,
+      },
+      mockCreateThreadMutate: vi.fn(),
+      mockSetActiveThread: vi.fn(),
+    };
+  },
+);
 
 // Mock the hooks used by ThreadSidebar (child component)
 vi.mock("@/application/hooks/chat/useThreads", () => ({
@@ -46,11 +38,7 @@ vi.mock("@/application/hooks/chat/useCreateThread", () => ({
 }));
 
 vi.mock("@/application/stores/useChatStore", () => {
-  const fn = (
-    selector: (state: {
-      setActiveThread: typeof mockSetActiveThread;
-    }) => unknown,
-  ) => {
+  const fn = (selector: (state: { setActiveThread: typeof mockSetActiveThread }) => unknown) => {
     return selector({ setActiveThread: mockSetActiveThread });
   };
   fn.getState = () => ({ setActiveThread: mockSetActiveThread });
@@ -87,9 +75,7 @@ describe("MainLayout", () => {
       </MainLayout>,
     );
 
-    expect(
-      screen.getByRole("button", { name: /new conversation/i }),
-    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /new conversation/i })).toBeInTheDocument();
   });
 
   it("does not show sidebar when showSidebar is false", () => {
@@ -99,8 +85,43 @@ describe("MainLayout", () => {
       </MainLayout>,
     );
 
-    expect(
-      screen.queryByRole("button", { name: /new conversation/i }),
-    ).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /new conversation/i })).not.toBeInTheDocument();
+  });
+
+  // ─── a11y: skip link ─────────────────────────────────────────────────────
+
+  it("renders a 'Skip to content' link targeting #main-content", () => {
+    renderWithProviders(
+      <MainLayout>
+        <div>Content</div>
+      </MainLayout>,
+    );
+
+    const skipLink = screen.getByRole("link", { name: /skip to content/i });
+    expect(skipLink).toBeInTheDocument();
+    expect(skipLink).toHaveAttribute("href", "#main-content");
+  });
+
+  it("skip link is sr-only by default (not visible)", () => {
+    renderWithProviders(
+      <MainLayout>
+        <div>Content</div>
+      </MainLayout>,
+    );
+
+    const skipLink = screen.getByRole("link", { name: /skip to content/i });
+    expect(skipLink).toHaveClass("sr-only");
+  });
+
+  it("main element has id=main-content and is focusable (tabIndex=-1)", () => {
+    renderWithProviders(
+      <MainLayout>
+        <div>Content</div>
+      </MainLayout>,
+    );
+
+    const main = screen.getByRole("main");
+    expect(main).toHaveAttribute("id", "main-content");
+    expect(main).toHaveAttribute("tabindex", "-1");
   });
 });
diff --git a/tests/unit/components/layout/ThreadSidebar.test.tsx b/tests/unit/components/layout/ThreadSidebar.test.tsx
index bfc08eb..7efe42c 100644
--- a/tests/unit/components/layout/ThreadSidebar.test.tsx
+++ b/tests/unit/components/layout/ThreadSidebar.test.tsx
@@ -3,32 +3,24 @@ import userEvent from "@testing-library/user-event";
 import { describe, it, expect, vi, beforeEach } from "vitest";
 import { renderWithProviders } from "../../../utils/render";
 import ThreadSidebar from "@/application/components/layout/ThreadSidebar";
-import {
-  createThread,
-  createAgentConfigMetadata,
-} from "../../../fixtures/external";
-
-const {
-  mockThreadsData,
-  mockAgentsData,
-  mockCreateThreadMutate,
-  mockSetActiveThread,
-} = vi.hoisted(() => {
-  return {
-    mockThreadsData: {
-      data: undefined as ReturnType<typeof createThread>[] | undefined,
-      isLoading: false,
-    },
-    mockAgentsData: {
-      data: undefined as
-        | ReturnType<typeof createAgentConfigMetadata>[]
-        | undefined,
-      isLoading: false,
-    },
-    mockCreateThreadMutate: vi.fn(),
-    mockSetActiveThread: vi.fn(),
-  };
-});
+import { createThread, createAgentConfigMetadata } from "../../../fixtures/external";
+
+const { mockThreadsData, mockAgentsData, mockCreateThreadMutate, mockSetActiveThread } = vi.hoisted(
+  () => {
+    return {
+      mockThreadsData: {
+        data: undefined as ReturnType<typeof createThread>[] | undefined,
+        isLoading: false,
+      },
+      mockAgentsData: {
+        data: undefined as ReturnType<typeof createAgentConfigMetadata>[] | undefined,
+        isLoading: false,
+      },
+      mockCreateThreadMutate: vi.fn(),
+      mockSetActiveThread: vi.fn(),
+    };
+  },
+);
 
 vi.mock("@/application/hooks/chat/useThreads", () => ({
   useThreads: () => mockThreadsData,
@@ -46,11 +38,7 @@ vi.mock("@/application/hooks/chat/useCreateThread", () => ({
 }));
 
 vi.mock("@/application/stores/useChatStore", () => {
-  const fn = (
-    selector: (state: {
-      setActiveThread: typeof mockSetActiveThread;
-    }) => unknown,
-  ) => {
+  const fn = (selector: (state: { setActiveThread: typeof mockSetActiveThread }) => unknown) => {
     return selector({ setActiveThread: mockSetActiveThread });
   };
   fn.getState = () => ({ setActiveThread: mockSetActiveThread });
@@ -70,15 +58,11 @@ describe("ThreadSidebar", () => {
   it("renders 'New Conversation' button", () => {
     renderWithProviders(<ThreadSidebar />);
 
-    expect(
-      screen.getByRole("button", { name: /new conversation/i }),
-    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /new conversation/i })).toBeInTheDocument();
   });
 
   it("clicking 'New Conversation' shows agent selection dialog", async () => {
-    mockAgentsData.data = [
-      createAgentConfigMetadata({ name: "agent-alpha", model: "gpt-4" }),
-    ];
+    mockAgentsData.data = [createAgentConfigMetadata({ name: "agent-alpha", model: "gpt-4" })];
     const user = userEvent.setup();
 
     renderWithProviders(<ThreadSidebar />);
@@ -104,9 +88,7 @@ describe("ThreadSidebar", () => {
   });
 
   it("selecting an agent calls createThread with the agent name", async () => {
-    mockAgentsData.data = [
-      createAgentConfigMetadata({ name: "agent-alpha", model: "gpt-4" }),
-    ];
+    mockAgentsData.data = [createAgentConfigMetadata({ name: "agent-alpha", model: "gpt-4" })];
     const user = userEvent.setup();
 
     renderWithProviders(<ThreadSidebar />);
diff --git a/tests/unit/components/rag/BreadcrumbBar.test.tsx b/tests/unit/components/rag/BreadcrumbBar.test.tsx
index d74790f..3aa59d3 100644
--- a/tests/unit/components/rag/BreadcrumbBar.test.tsx
+++ b/tests/unit/components/rag/BreadcrumbBar.test.tsx
@@ -7,10 +7,7 @@ import BreadcrumbBar from "@/application/components/rag/BreadcrumbBar";
 describe("BreadcrumbBar", () => {
   it("renders path segments as breadcrumbs", () => {
     renderWithProviders(
-      <BreadcrumbBar
-        segments={["docs", "reports", "2026"]}
-        onNavigate={vi.fn()}
-      />,
+      <BreadcrumbBar segments={["docs", "reports", "2026"]} onNavigate={vi.fn()} />,
     );
 
     expect(screen.getByText("docs")).toBeInTheDocument();
@@ -19,20 +16,13 @@ describe("BreadcrumbBar", () => {
   });
 
   it("shows Home icon for root", () => {
-    renderWithProviders(
-      <BreadcrumbBar segments={["docs"]} onNavigate={vi.fn()} />,
-    );
+    renderWithProviders(<BreadcrumbBar segments={["docs"]} onNavigate={vi.fn()} />);
 
     expect(screen.getByLabelText("Home")).toBeInTheDocument();
   });
 
   it("current (last) segment is not clickable — plain text, not a button", () => {
-    renderWithProviders(
-      <BreadcrumbBar
-        segments={["docs", "reports"]}
-        onNavigate={vi.fn()}
-      />,
-    );
+    renderWithProviders(<BreadcrumbBar segments={["docs", "reports"]} onNavigate={vi.fn()} />);
 
     const lastSegment = screen.getByText("reports");
     expect(lastSegment.tagName).not.toBe("BUTTON");
@@ -40,10 +30,7 @@ describe("BreadcrumbBar", () => {
 
   it("other segments are clickable buttons", () => {
     renderWithProviders(
-      <BreadcrumbBar
-        segments={["docs", "reports", "q1"]}
-        onNavigate={vi.fn()}
-      />,
+      <BreadcrumbBar segments={["docs", "reports", "q1"]} onNavigate={vi.fn()} />,
     );
 
     const docsSegment = screen.getByRole("button", { name: "docs" });
@@ -57,10 +44,7 @@ describe("BreadcrumbBar", () => {
     const onNavigate = vi.fn();
 
     renderWithProviders(
-      <BreadcrumbBar
-        segments={["docs", "reports", "q1"]}
-        onNavigate={onNavigate}
-      />,
+      <BreadcrumbBar segments={["docs", "reports", "q1"]} onNavigate={onNavigate} />,
     );
 
     await user.click(screen.getByRole("button", { name: "docs" }));
@@ -74,12 +58,7 @@ describe("BreadcrumbBar", () => {
     const user = userEvent.setup();
     const onNavigate = vi.fn();
 
-    renderWithProviders(
-      <BreadcrumbBar
-        segments={["docs", "reports"]}
-        onNavigate={onNavigate}
-      />,
-    );
+    renderWithProviders(<BreadcrumbBar segments={["docs", "reports"]} onNavigate={onNavigate} />);
 
     await user.click(screen.getByLabelText("Home"));
     expect(onNavigate).toHaveBeenCalledWith(-1);
diff --git a/tests/unit/components/rag/FileContentPanel.test.tsx b/tests/unit/components/rag/FileContentPanel.test.tsx
index 99e2309..24ebaa1 100644
--- a/tests/unit/components/rag/FileContentPanel.test.tsx
+++ b/tests/unit/components/rag/FileContentPanel.test.tsx
@@ -42,9 +42,7 @@ describe("FileContentPanel", () => {
       />,
     );
 
-    expect(
-      screen.getByRole("button", { name: /close/i }),
-    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /close/i })).toBeInTheDocument();
   });
 
   it("clicking close calls onClose", async () => {
@@ -86,4 +84,4 @@ describe("FileContentPanel", () => {
     expect(screen.getByText("foo")).toBeInTheDocument();
     expect(screen.getByText("bar")).toBeInTheDocument();
   });
-});
\ No newline at end of file
+});
diff --git a/tests/unit/components/rag/FileList.test.tsx b/tests/unit/components/rag/FileList.test.tsx
index 9815365..55ef41d 100644
--- a/tests/unit/components/rag/FileList.test.tsx
+++ b/tests/unit/components/rag/FileList.test.tsx
@@ -33,9 +33,7 @@ describe("FileList", () => {
     );
 
     expect(screen.getByText(/unable to load/i)).toBeInTheDocument();
-    expect(
-      screen.getByRole("button", { name: /retry/i }),
-    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /retry/i })).toBeInTheDocument();
   });
 
   it("shows empty state when no files or folders", () => {
@@ -59,7 +57,12 @@ describe("FileList", () => {
       { prefix: "images/", name: "images" },
     ];
     const files = [
-      { objectName: "readme.md", filename: "readme.md", size: 500, lastModified: "2026-04-06T10:00:00Z" },
+      {
+        objectName: "readme.md",
+        filename: "readme.md",
+        size: 500,
+        lastModified: "2026-04-06T10:00:00Z",
+      },
     ];
 
     renderWithProviders(
diff --git a/tests/unit/components/rag/FileRow.test.tsx b/tests/unit/components/rag/FileRow.test.tsx
index 5d5d9d4..09b4ba8 100644
--- a/tests/unit/components/rag/FileRow.test.tsx
+++ b/tests/unit/components/rag/FileRow.test.tsx
@@ -7,11 +7,7 @@ import FileRow from "@/application/components/rag/FileRow";
 describe("FileRow", () => {
   it("renders filename as the last path segment", () => {
     renderWithProviders(
-      <FileRow
-        filename="readme.md"
-        size={1024}
-        lastModified="2026-04-06T10:00:00Z"
-      />,
+      <FileRow filename="readme.md" size={1024} lastModified="2026-04-06T10:00:00Z" />,
     );
 
     expect(screen.getByText("readme.md")).toBeInTheDocument();
@@ -19,11 +15,7 @@ describe("FileRow", () => {
 
   it("renders human-readable file size", () => {
     renderWithProviders(
-      <FileRow
-        filename="report.pdf"
-        size={1536000}
-        lastModified="2026-04-06T10:00:00Z"
-      />,
+      <FileRow filename="report.pdf" size={1536000} lastModified="2026-04-06T10:00:00Z" />,
     );
 
     expect(screen.getByText("1.5 MB")).toBeInTheDocument();
@@ -31,31 +23,21 @@ describe("FileRow", () => {
 
   it("renders formatted date", () => {
     renderWithProviders(
-      <FileRow
-        filename="guide.md"
-        size={500}
-        lastModified="2026-04-06T10:00:00Z"
-      />,
+      <FileRow filename="guide.md" size={500} lastModified="2026-04-06T10:00:00Z" />,
     );
 
     expect(screen.getByText(/2026/)).toBeInTheDocument();
   });
 
   it("shows — for null lastModified", () => {
-    renderWithProviders(
-      <FileRow filename="draft.txt" size={100} lastModified={null} />,
-    );
+    renderWithProviders(<FileRow filename="draft.txt" size={100} lastModified={null} />);
 
     expect(screen.getByText("—")).toBeInTheDocument();
   });
 
   it("shows 0 B for zero size", () => {
     renderWithProviders(
-      <FileRow
-        filename="empty.log"
-        size={0}
-        lastModified="2026-04-06T10:00:00Z"
-      />,
+      <FileRow filename="empty.log" size={0} lastModified="2026-04-06T10:00:00Z" />,
     );
 
     expect(screen.getByText("0 B")).toBeInTheDocument();
@@ -63,11 +45,7 @@ describe("FileRow", () => {
 
   it("shows 1.2 MB for large files", () => {
     renderWithProviders(
-      <FileRow
-        filename="archive.zip"
-        size={1258291}
-        lastModified="2026-04-06T10:00:00Z"
-      />,
+      <FileRow filename="archive.zip" size={1258291} lastModified="2026-04-06T10:00:00Z" />,
     );
 
     expect(screen.getByText("1.2 MB")).toBeInTheDocument();
@@ -75,11 +53,7 @@ describe("FileRow", () => {
 
   it("does not render buttons when no callbacks provided", () => {
     renderWithProviders(
-      <FileRow
-        filename="readme.md"
-        size={1024}
-        lastModified="2026-04-06T10:00:00Z"
-      />,
+      <FileRow filename="readme.md" size={1024} lastModified="2026-04-06T10:00:00Z" />,
     );
 
     expect(screen.queryByRole("button")).not.toBeInTheDocument();
@@ -95,9 +69,7 @@ describe("FileRow", () => {
       />,
     );
 
-    expect(
-      screen.getByRole("button", { name: /read/i }),
-    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /read/i })).toBeInTheDocument();
   });
 
   it("calls onRead when the read button is clicked", async () => {
@@ -127,9 +99,7 @@ describe("FileRow", () => {
       />,
     );
 
-    expect(
-      screen.getByRole("button", { name: /index options/i }),
-    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /index options/i })).toBeInTheDocument();
   });
 
   it("shows LightRAG option in dropdown when clicked", async () => {
@@ -190,14 +160,9 @@ describe("FileRow", () => {
 
   it("shows spinner when isIndexing is true", () => {
     renderWithProviders(
-      <FileRow
-        filename="report.pdf"
-        size={1024}
-        lastModified="2026-04-06T10:00:00Z"
-        isIndexing
-      />,
+      <FileRow filename="report.pdf" size={1024} lastModified="2026-04-06T10:00:00Z" isIndexing />,
     );
 
     expect(screen.getByText("report.pdf")).toBeInTheDocument();
   });
-});
\ No newline at end of file
+});
diff --git a/tests/unit/components/rag/FolderRow.test.tsx b/tests/unit/components/rag/FolderRow.test.tsx
index 9bf52cf..4b1af90 100644
--- a/tests/unit/components/rag/FolderRow.test.tsx
+++ b/tests/unit/components/rag/FolderRow.test.tsx
@@ -34,13 +34,9 @@ describe("FolderRow", () => {
   });
 
   it("renders an index action menu when onIndexLightRAG is provided", () => {
-    renderWithProviders(
-      <FolderRow name="docs" onClick={vi.fn()} onIndexLightRAG={vi.fn()} />,
-    );
+    renderWithProviders(<FolderRow name="docs" onClick={vi.fn()} onIndexLightRAG={vi.fn()} />);
 
-    expect(
-      screen.getByRole("button", { name: /index options/i }),
-    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /index options/i })).toBeInTheDocument();
   });
 
   it("shows dropdown with LightRAG option when index button is clicked", async () => {
@@ -88,4 +84,4 @@ describe("FolderRow", () => {
 
     expect(screen.getByText("docs")).toBeInTheDocument();
   });
-});
\ No newline at end of file
+});
diff --git a/tests/unit/components/rag/IndexActionMenu.test.tsx b/tests/unit/components/rag/IndexActionMenu.test.tsx
index 23a4410..cc08f99 100644
--- a/tests/unit/components/rag/IndexActionMenu.test.tsx
+++ b/tests/unit/components/rag/IndexActionMenu.test.tsx
@@ -6,36 +6,20 @@ import IndexActionMenu from "@/application/components/rag/IndexActionMenu";
 
 describe("IndexActionMenu", () => {
   it("renders trigger button", () => {
-    renderWithProviders(
-      <IndexActionMenu
-        onIndexLightRAG={vi.fn()}
-        onIndexClassical={vi.fn()}
-      />,
-    );
+    renderWithProviders(<IndexActionMenu onIndexLightRAG={vi.fn()} onIndexClassical={vi.fn()} />);
 
-    expect(
-      screen.getByRole("button", { name: /index options/i }),
-    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /index options/i })).toBeInTheDocument();
   });
 
   it("clicking trigger shows dropdown options", async () => {
     const user = userEvent.setup();
 
-    renderWithProviders(
-      <IndexActionMenu
-        onIndexLightRAG={vi.fn()}
-        onIndexClassical={vi.fn()}
-      />,
-    );
+    renderWithProviders(<IndexActionMenu onIndexLightRAG={vi.fn()} onIndexClassical={vi.fn()} />);
 
     await user.click(screen.getByRole("button", { name: /index options/i }));
 
-    expect(
-      screen.getByRole("menuitem", { name: /index with lightrag/i }),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole("menuitem", { name: /index with classical/i }),
-    ).toBeInTheDocument();
+    expect(screen.getByRole("menuitem", { name: /index with lightrag/i })).toBeInTheDocument();
+    expect(screen.getByRole("menuitem", { name: /index with classical/i })).toBeInTheDocument();
   });
 
   it("clicking LightRAG option calls onIndexLightRAG", async () => {
@@ -43,16 +27,11 @@ describe("IndexActionMenu", () => {
     const onIndexLightRAG = vi.fn();
 
     renderWithProviders(
-      <IndexActionMenu
-        onIndexLightRAG={onIndexLightRAG}
-        onIndexClassical={vi.fn()}
-      />,
+      <IndexActionMenu onIndexLightRAG={onIndexLightRAG} onIndexClassical={vi.fn()} />,
     );
 
     await user.click(screen.getByRole("button", { name: /index options/i }));
-    await user.click(
-      screen.getByRole("menuitem", { name: /index with lightrag/i }),
-    );
+    await user.click(screen.getByRole("menuitem", { name: /index with lightrag/i }));
 
     expect(onIndexLightRAG).toHaveBeenCalledOnce();
   });
@@ -62,17 +41,153 @@ describe("IndexActionMenu", () => {
     const onIndexClassical = vi.fn();
 
     renderWithProviders(
-      <IndexActionMenu
-        onIndexLightRAG={vi.fn()}
-        onIndexClassical={onIndexClassical}
-      />,
+      <IndexActionMenu onIndexLightRAG={vi.fn()} onIndexClassical={onIndexClassical} />,
     );
 
     await user.click(screen.getByRole("button", { name: /index options/i }));
-    await user.click(
-      screen.getByRole("menuitem", { name: /index with classical/i }),
-    );
+    await user.click(screen.getByRole("menuitem", { name: /index with classical/i }));
 
     expect(onIndexClassical).toHaveBeenCalledOnce();
   });
-});
\ No newline at end of file
+
+  // ─── a11y: keyboard navigation ────────────────────────────────────────────
+
+  it("ArrowDown on trigger opens the menu", async () => {
+    const user = userEvent.setup();
+
+    renderWithProviders(<IndexActionMenu onIndexLightRAG={vi.fn()} onIndexClassical={vi.fn()} />);
+
+    const trigger = screen.getByRole("button", { name: /index options/i });
+    trigger.focus();
+    await user.keyboard("{ArrowDown}");
+
+    expect(screen.getByRole("menuitem", { name: /index with lightrag/i })).toBeInTheDocument();
+  });
+
+  it("Enter on trigger opens the menu", async () => {
+    const user = userEvent.setup();
+
+    renderWithProviders(<IndexActionMenu onIndexLightRAG={vi.fn()} onIndexClassical={vi.fn()} />);
+
+    const trigger = screen.getByRole("button", { name: /index options/i });
+    trigger.focus();
+    await user.keyboard("{Enter}");
+
+    expect(screen.getByRole("menuitem", { name: /index with lightrag/i })).toBeInTheDocument();
+  });
+
+  it("ArrowDown cycles through menu items (wraps around)", async () => {
+    const user = userEvent.setup();
+
+    renderWithProviders(<IndexActionMenu onIndexLightRAG={vi.fn()} onIndexClassical={vi.fn()} />);
+
+    const trigger = screen.getByRole("button", { name: /index options/i });
+    trigger.focus();
+    await user.keyboard("{ArrowDown}");
+
+    const lightrag = screen.getByRole("menuitem", { name: /index with lightrag/i });
+    const classical = screen.getByRole("menuitem", { name: /index with classical/i });
+
+    // First item should be focused after opening.
+    expect(lightrag).toHaveFocus();
+
+    // ArrowDown → second item.
+    await user.keyboard("{ArrowDown}");
+    expect(classical).toHaveFocus();
+
+    // ArrowDown again wraps to first item.
+    await user.keyboard("{ArrowDown}");
+    expect(lightrag).toHaveFocus();
+  });
+
+  it("ArrowUp cycles through menu items in reverse (wraps around)", async () => {
+    const user = userEvent.setup();
+
+    renderWithProviders(<IndexActionMenu onIndexLightRAG={vi.fn()} onIndexClassical={vi.fn()} />);
+
+    const trigger = screen.getByRole("button", { name: /index options/i });
+    trigger.focus();
+    await user.keyboard("{ArrowDown}");
+
+    const lightrag = screen.getByRole("menuitem", { name: /index with lightrag/i });
+    const classical = screen.getByRole("menuitem", { name: /index with classical/i });
+
+    // First item is focused after open.
+    expect(lightrag).toHaveFocus();
+
+    // ArrowUp wraps to last item.
+    await user.keyboard("{ArrowUp}");
+    expect(classical).toHaveFocus();
+
+    // ArrowUp again → back to first item.
+    await user.keyboard("{ArrowUp}");
+    expect(lightrag).toHaveFocus();
+  });
+
+  it("Escape closes the menu and returns focus to the trigger", async () => {
+    const user = userEvent.setup();
+
+    renderWithProviders(<IndexActionMenu onIndexLightRAG={vi.fn()} onIndexClassical={vi.fn()} />);
+
+    const trigger = screen.getByRole("button", { name: /index options/i });
+    trigger.focus();
+    await user.keyboard("{ArrowDown}");
+
+    // Menu is open.
+    expect(screen.getByRole("menuitem", { name: /index with lightrag/i })).toBeInTheDocument();
+
+    await user.keyboard("{Escape}");
+
+    // Menu is closed.
+    expect(
+      screen.queryByRole("menuitem", { name: /index with lightrag/i }),
+    ).not.toBeInTheDocument();
+
+    // Focus returned to trigger.
+    expect(trigger).toHaveFocus();
+  });
+
+  it("outside click closes the menu", async () => {
+    const user = userEvent.setup();
+
+    renderWithProviders(
+      <div>
+        <div data-testid="outside">Outside</div>
+        <IndexActionMenu onIndexLightRAG={vi.fn()} onIndexClassical={vi.fn()} />
+      </div>,
+    );
+
+    await user.click(screen.getByRole("button", { name: /index options/i }));
+
+    expect(screen.getByRole("menuitem", { name: /index with lightrag/i })).toBeInTheDocument();
+
+    await user.click(screen.getByTestId("outside"));
+
+    expect(
+      screen.queryByRole("menuitem", { name: /index with lightrag/i }),
+    ).not.toBeInTheDocument();
+  });
+
+  it("selecting via keyboard calls the right handler and closes menu", async () => {
+    const user = userEvent.setup();
+    const onIndexLightRAG = vi.fn();
+
+    renderWithProviders(
+      <IndexActionMenu onIndexLightRAG={onIndexLightRAG} onIndexClassical={vi.fn()} />,
+    );
+
+    const trigger = screen.getByRole("button", { name: /index options/i });
+    trigger.focus();
+    await user.keyboard("{ArrowDown}");
+
+    const lightrag = screen.getByRole("menuitem", { name: /index with lightrag/i });
+    expect(lightrag).toHaveFocus();
+
+    await user.keyboard("{Enter}");
+
+    expect(onIndexLightRAG).toHaveBeenCalledOnce();
+    expect(
+      screen.queryByRole("menuitem", { name: /index with lightrag/i }),
+    ).not.toBeInTheDocument();
+  });
+});
diff --git a/tests/unit/components/rag/PipelineToggle.test.tsx b/tests/unit/components/rag/PipelineToggle.test.tsx
index b276fc6..d9d6dc6 100644
--- a/tests/unit/components/rag/PipelineToggle.test.tsx
+++ b/tests/unit/components/rag/PipelineToggle.test.tsx
@@ -6,22 +6,14 @@ import PipelineToggle from "@/application/components/rag/PipelineToggle";
 
 describe("PipelineToggle", () => {
   it("renders 2 toggle options: LightRAG and Classical", () => {
-    renderWithProviders(
-      <PipelineToggle value="lightrag" onChange={vi.fn()} />,
-    );
+    renderWithProviders(<PipelineToggle value="lightrag" onChange={vi.fn()} />);
 
-    expect(
-      screen.getByRole("button", { name: /lightrag/i }),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole("button", { name: /classical/i }),
-    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /lightrag/i })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /classical/i })).toBeInTheDocument();
   });
 
   it("shows active value for LightRAG", () => {
-    renderWithProviders(
-      <PipelineToggle value="lightrag" onChange={vi.fn()} />,
-    );
+    renderWithProviders(<PipelineToggle value="lightrag" onChange={vi.fn()} />);
 
     const lightragBtn = screen.getByRole("button", { name: /lightrag/i });
     const classicalBtn = screen.getByRole("button", { name: /classical/i });
@@ -31,9 +23,7 @@ describe("PipelineToggle", () => {
   });
 
   it("shows active value for Classical", () => {
-    renderWithProviders(
-      <PipelineToggle value="classical" onChange={vi.fn()} />,
-    );
+    renderWithProviders(<PipelineToggle value="classical" onChange={vi.fn()} />);
 
     const lightragBtn = screen.getByRole("button", { name: /lightrag/i });
     const classicalBtn = screen.getByRole("button", { name: /classical/i });
@@ -46,9 +36,7 @@ describe("PipelineToggle", () => {
     const user = userEvent.setup();
     const onChange = vi.fn();
 
-    renderWithProviders(
-      <PipelineToggle value="lightrag" onChange={onChange} />,
-    );
+    renderWithProviders(<PipelineToggle value="lightrag" onChange={onChange} />);
 
     await user.click(screen.getByRole("button", { name: /classical/i }));
     expect(onChange).toHaveBeenCalledWith("classical");
@@ -58,11 +46,9 @@ describe("PipelineToggle", () => {
     const user = userEvent.setup();
     const onChange = vi.fn();
 
-    renderWithProviders(
-      <PipelineToggle value="classical" onChange={onChange} />,
-    );
+    renderWithProviders(<PipelineToggle value="classical" onChange={onChange} />);
 
     await user.click(screen.getByRole("button", { name: /lightrag/i }));
     expect(onChange).toHaveBeenCalledWith("lightrag");
   });
-});
\ No newline at end of file
+});
diff --git a/tests/unit/components/rag/QueryPanel.test.tsx b/tests/unit/components/rag/QueryPanel.test.tsx
index 40bfb18..5e4cf3f 100644
--- a/tests/unit/components/rag/QueryPanel.test.tsx
+++ b/tests/unit/components/rag/QueryPanel.test.tsx
@@ -31,52 +31,32 @@ vi.mock("@/application/hooks/rag/useClassicalQuery", () => ({
 
 describe("QueryPanel", () => {
   it("renders PipelineToggle", () => {
-    renderWithProviders(
-      <QueryPanel workingDir="/data" />,
-    );
-
-    expect(
-      screen.getByRole("button", { name: /lightrag/i }),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole("button", { name: /classical/i }),
-    ).toBeInTheDocument();
+    renderWithProviders(<QueryPanel workingDir="/data" />);
+
+    expect(screen.getByRole("button", { name: /lightrag/i })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /classical/i })).toBeInTheDocument();
   });
 
   it("renders search textarea", () => {
-    renderWithProviders(
-      <QueryPanel workingDir="/data" />,
-    );
+    renderWithProviders(<QueryPanel workingDir="/data" />);
 
-    expect(
-      screen.getByPlaceholderText(/ask a question|search|query/i),
-    ).toBeInTheDocument();
+    expect(screen.getByPlaceholderText(/ask a question|search|query/i)).toBeInTheDocument();
   });
 
   it("renders Advanced Options collapsible", () => {
-    renderWithProviders(
-      <QueryPanel workingDir="/data" />,
-    );
+    renderWithProviders(<QueryPanel workingDir="/data" />);
 
-    expect(
-      screen.getByRole("button", { name: /advanced options/i }),
-    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /advanced options/i })).toBeInTheDocument();
   });
 
   it("renders search button", () => {
-    renderWithProviders(
-      <QueryPanel workingDir="/data" />,
-    );
+    renderWithProviders(<QueryPanel workingDir="/data" />);
 
-    expect(
-      screen.getByRole("button", { name: /search/i }),
-    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /search/i })).toBeInTheDocument();
   });
 
   it("search button is disabled when workingDir is empty", () => {
-    renderWithProviders(
-      <QueryPanel workingDir="" />,
-    );
+    renderWithProviders(<QueryPanel workingDir="" />);
 
     const searchBtn = screen.getByRole("button", { name: /search/i });
     expect(searchBtn).toBeDisabled();
@@ -85,9 +65,7 @@ describe("QueryPanel", () => {
   it("search button is enabled when workingDir is provided and query has text", async () => {
     const user = userEvent.setup();
 
-    renderWithProviders(
-      <QueryPanel workingDir="/data" />,
-    );
+    renderWithProviders(<QueryPanel workingDir="/data" />);
 
     const textarea = screen.getByPlaceholderText(/ask a question|search|query/i);
     await user.type(textarea, "test query");
@@ -95,4 +73,4 @@ describe("QueryPanel", () => {
     const searchBtn = screen.getByRole("button", { name: /search/i });
     expect(searchBtn).not.toBeDisabled();
   });
-});
\ No newline at end of file
+});
diff --git a/tests/unit/components/rag/QueryResults.test.tsx b/tests/unit/components/rag/QueryResults.test.tsx
index 022a5bd..93cb409 100644
--- a/tests/unit/components/rag/QueryResults.test.tsx
+++ b/tests/unit/components/rag/QueryResults.test.tsx
@@ -39,9 +39,7 @@ describe("QueryResults", () => {
       <QueryResults data={mockData} error={null} isLoading={false} onRetry={vi.fn()} />,
     );
 
-    expect(
-      screen.getByRole("button", { name: /copy/i }),
-    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /copy/i })).toBeInTheDocument();
   });
 
   it("does not show copy button when data is null", () => {
@@ -49,9 +47,7 @@ describe("QueryResults", () => {
       <QueryResults data={null} error={null} isLoading={false} onRetry={vi.fn()} />,
     );
 
-    expect(
-      screen.queryByRole("button", { name: /copy/i }),
-    ).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /copy/i })).not.toBeInTheDocument();
   });
 
   it("shows error message with retry button when error is present", () => {
@@ -62,9 +58,7 @@ describe("QueryResults", () => {
     );
 
     expect(screen.getByText("Query failed")).toBeInTheDocument();
-    expect(
-      screen.getByRole("button", { name: /retry/i }),
-    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /retry/i })).toBeInTheDocument();
   });
 
   it("clicking retry button calls onRetry", async () => {
@@ -79,4 +73,4 @@ describe("QueryResults", () => {
     await user.click(screen.getByRole("button", { name: /retry/i }));
     expect(onRetry).toHaveBeenCalledOnce();
   });
-});
\ No newline at end of file
+});
diff --git a/tests/unit/components/rag/RagTabBar.test.tsx b/tests/unit/components/rag/RagTabBar.test.tsx
index f9d8c85..d0d3815 100644
--- a/tests/unit/components/rag/RagTabBar.test.tsx
+++ b/tests/unit/components/rag/RagTabBar.test.tsx
@@ -6,18 +6,14 @@ import RagTabBar from "@/application/components/rag/RagTabBar";
 
 describe("RagTabBar", () => {
   it("renders 2 tab buttons: Browse and Query", () => {
-    renderWithProviders(
-      <RagTabBar activeTab="browse" onTabChange={vi.fn()} />,
-    );
+    renderWithProviders(<RagTabBar activeTab="browse" onTabChange={vi.fn()} />);
 
     expect(screen.getByRole("tab", { name: /browse/i })).toBeInTheDocument();
     expect(screen.getByRole("tab", { name: /query/i })).toBeInTheDocument();
   });
 
   it("shows active tab with aria-selected indicator", () => {
-    renderWithProviders(
-      <RagTabBar activeTab="browse" onTabChange={vi.fn()} />,
-    );
+    renderWithProviders(<RagTabBar activeTab="browse" onTabChange={vi.fn()} />);
 
     const browseTab = screen.getByRole("tab", { name: /browse/i });
     const queryTab = screen.getByRole("tab", { name: /query/i });
@@ -27,9 +23,7 @@ describe("RagTabBar", () => {
   });
 
   it("shows Query tab as active when value is query", () => {
-    renderWithProviders(
-      <RagTabBar activeTab="query" onTabChange={vi.fn()} />,
-    );
+    renderWithProviders(<RagTabBar activeTab="query" onTabChange={vi.fn()} />);
 
     const browseTab = screen.getByRole("tab", { name: /browse/i });
     const queryTab = screen.getByRole("tab", { name: /query/i });
@@ -42,9 +36,7 @@ describe("RagTabBar", () => {
     const user = userEvent.setup();
     const onTabChange = vi.fn();
 
-    renderWithProviders(
-      <RagTabBar activeTab="browse" onTabChange={onTabChange} />,
-    );
+    renderWithProviders(<RagTabBar activeTab="browse" onTabChange={onTabChange} />);
 
     await user.click(screen.getByRole("tab", { name: /query/i }));
     expect(onTabChange).toHaveBeenCalledWith("query");
@@ -54,11 +46,9 @@ describe("RagTabBar", () => {
     const user = userEvent.setup();
     const onTabChange = vi.fn();
 
-    renderWithProviders(
-      <RagTabBar activeTab="browse" onTabChange={onTabChange} />,
-    );
+    renderWithProviders(<RagTabBar activeTab="browse" onTabChange={onTabChange} />);
 
     await user.click(screen.getByRole("tab", { name: /browse/i }));
     expect(onTabChange).not.toHaveBeenCalled();
   });
-});
\ No newline at end of file
+});
diff --git a/tests/unit/components/rag/UploadButton.test.tsx b/tests/unit/components/rag/UploadButton.test.tsx
index 10c5c28..08b1944 100644
--- a/tests/unit/components/rag/UploadButton.test.tsx
+++ b/tests/unit/components/rag/UploadButton.test.tsx
@@ -23,19 +23,13 @@ describe("UploadButton", () => {
   });
 
   it("renders upload button with correct text", () => {
-    renderWithProviders(
-      <UploadButton prefix="documents/" onUploadComplete={vi.fn()} />,
-    );
+    renderWithProviders(<UploadButton prefix="documents/" onUploadComplete={vi.fn()} />);
 
-    expect(
-      screen.getByRole("button", { name: /upload/i }),
-    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /upload/i })).toBeInTheDocument();
   });
 
   it("has a hidden file input", () => {
-    renderWithProviders(
-      <UploadButton prefix="documents/" onUploadComplete={vi.fn()} />,
-    );
+    renderWithProviders(<UploadButton prefix="documents/" onUploadComplete={vi.fn()} />);
 
     const fileInput = screen.getByLabelText(/choose file/i);
     expect(fileInput).toBeInTheDocument();
@@ -45,9 +39,7 @@ describe("UploadButton", () => {
   it("clicking button triggers file input click", async () => {
     const user = userEvent.setup();
 
-    renderWithProviders(
-      <UploadButton prefix="documents/" onUploadComplete={vi.fn()} />,
-    );
+    renderWithProviders(<UploadButton prefix="documents/" onUploadComplete={vi.fn()} />);
 
     const fileInput = screen.getByLabelText(/choose file/i);
     const clickSpy = vi.spyOn(fileInput, "click");
@@ -65,9 +57,7 @@ describe("UploadButton", () => {
       options?.onSuccess?.();
     });
 
-    renderWithProviders(
-      <UploadButton prefix="documents/reports/" onUploadComplete={vi.fn()} />,
-    );
+    renderWithProviders(<UploadButton prefix="documents/reports/" onUploadComplete={vi.fn()} />);
 
     const file = new File(["dummy content"], "report.pdf", {
       type: "application/pdf",
@@ -86,14 +76,10 @@ describe("UploadButton", () => {
   it("shows loading indicator during upload", () => {
     mockIsPending.mockReturnValue(true);
 
-    renderWithProviders(
-      <UploadButton prefix="documents/" onUploadComplete={vi.fn()} />,
-    );
+    renderWithProviders(<UploadButton prefix="documents/" onUploadComplete={vi.fn()} />);
 
     expect(screen.getByTestId("upload-spinner")).toBeInTheDocument();
-    expect(
-      screen.getByRole("button", { name: /uploading/i }),
-    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /uploading/i })).toBeInTheDocument();
   });
 
   it("calls onUploadComplete on success", async () => {
@@ -104,12 +90,7 @@ describe("UploadButton", () => {
       options?.onSuccess?.();
     });
 
-    renderWithProviders(
-      <UploadButton
-        prefix="documents/"
-        onUploadComplete={onUploadComplete}
-      />,
-    );
+    renderWithProviders(<UploadButton prefix="documents/" onUploadComplete={onUploadComplete} />);
 
     const file = new File(["dummy content"], "report.pdf", {
       type: "application/pdf",
diff --git a/tests/unit/components/rag/WorkspaceSelector.test.tsx b/tests/unit/components/rag/WorkspaceSelector.test.tsx
index e20a64d..f87aee9 100644
--- a/tests/unit/components/rag/WorkspaceSelector.test.tsx
+++ b/tests/unit/components/rag/WorkspaceSelector.test.tsx
@@ -19,9 +19,7 @@ describe("WorkspaceSelector", () => {
     const user = userEvent.setup();
     const folders = ["/data/project-a/", "/data/project-b/", "/other/docs/"];
 
-    renderWithProviders(
-      <WorkspaceSelector value="" onChange={vi.fn()} folders={folders} />,
-    );
+    renderWithProviders(<WorkspaceSelector value="" onChange={vi.fn()} folders={folders} />);
 
     const input = screen.getByLabelText(/workspace/i);
     await user.click(input);
@@ -37,9 +35,7 @@ describe("WorkspaceSelector", () => {
     const onChange = vi.fn();
     const folders = ["/data/project-a/", "/data/project-b/"];
 
-    renderWithProviders(
-      <WorkspaceSelector value="" onChange={onChange} folders={folders} />,
-    );
+    renderWithProviders(<WorkspaceSelector value="" onChange={onChange} folders={folders} />);
 
     const input = screen.getByLabelText(/workspace/i);
     await user.click(input);
@@ -53,9 +49,7 @@ describe("WorkspaceSelector", () => {
     const user = userEvent.setup();
     const onChange = vi.fn();
 
-    renderWithProviders(
-      <WorkspaceSelector value="" onChange={onChange} folders={[]} />,
-    );
+    renderWithProviders(<WorkspaceSelector value="" onChange={onChange} folders={[]} />);
 
     const input = screen.getByLabelText(/workspace/i);
     await user.click(input);
@@ -63,4 +57,95 @@ describe("WorkspaceSelector", () => {
 
     expect(onChange).toHaveBeenCalled();
   });
-});
\ No newline at end of file
+
+  // ─── a11y: combobox keyboard navigation ──────────────────────────────────
+
+  it("ArrowDown moves active suggestion down", async () => {
+    const user = userEvent.setup();
+    const folders = ["/data/project-a/", "/data/project-b/"];
+
+    renderWithProviders(<WorkspaceSelector value="" onChange={vi.fn()} folders={folders} />);
+
+    const input = screen.getByLabelText(/workspace/i);
+    await user.click(input);
+
+    // Listbox is open with options.
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+    const options = screen.getAllByRole("option");
+    expect(options).toHaveLength(2);
+
+    await user.keyboard("{ArrowDown}");
+
+    // First option should be highlighted as active.
+    expect(options[0]).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("ArrowUp wraps to last suggestion from first", async () => {
+    const user = userEvent.setup();
+    const folders = ["/data/project-a/", "/data/project-b/"];
+
+    renderWithProviders(<WorkspaceSelector value="" onChange={vi.fn()} folders={folders} />);
+
+    const input = screen.getByLabelText(/workspace/i);
+    await user.click(input);
+    await user.keyboard("{ArrowUp}");
+
+    const options = screen.getAllByRole("option");
+    // ArrowUp from position -1 wraps to the last item.
+    expect(options[1]).toHaveAttribute("aria-selected", "true");
+  });
+
+  it("Enter commits the highlighted suggestion and calls onChange", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+    const folders = ["/data/project-a/", "/data/project-b/"];
+
+    renderWithProviders(<WorkspaceSelector value="" onChange={onChange} folders={folders} />);
+
+    const input = screen.getByLabelText(/workspace/i);
+    await user.click(input);
+    await user.keyboard("{ArrowDown}");
+
+    // First suggestion is active.
+    const options = screen.getAllByRole("option");
+    expect(options[0]).toHaveAttribute("aria-selected", "true");
+
+    // Enter commits it.
+    await user.keyboard("{Enter}");
+
+    expect(onChange).toHaveBeenCalledWith("/data/project-a/");
+  });
+
+  it("Escape closes the listbox", async () => {
+    const user = userEvent.setup();
+    const folders = ["/data/project-a/", "/data/project-b/"];
+
+    renderWithProviders(<WorkspaceSelector value="" onChange={vi.fn()} folders={folders} />);
+
+    const input = screen.getByLabelText(/workspace/i);
+    await user.click(input);
+
+    expect(screen.getByRole("listbox")).toBeInTheDocument();
+
+    await user.keyboard("{Escape}");
+
+    expect(screen.queryByRole("listbox")).not.toBeInTheDocument();
+  });
+
+  it("input has role=combobox and aria-controls pointing to listbox", async () => {
+    const user = userEvent.setup();
+    const folders = ["/data/project-a/"];
+
+    renderWithProviders(<WorkspaceSelector value="" onChange={vi.fn()} folders={folders} />);
+
+    const input = screen.getByLabelText(/workspace/i);
+    expect(input).toHaveAttribute("role", "combobox");
+    expect(input).toHaveAttribute("aria-autocomplete", "list");
+
+    await user.click(input);
+
+    const listbox = screen.getByRole("listbox");
+    const listboxId = listbox.getAttribute("id");
+    expect(input.getAttribute("aria-controls")).toBe(listboxId);
+  });
+});
diff --git a/tests/unit/components/shared/SegmentedToggle.test.tsx b/tests/unit/components/shared/SegmentedToggle.test.tsx
new file mode 100644
index 0000000..fa7b24c
--- /dev/null
+++ b/tests/unit/components/shared/SegmentedToggle.test.tsx
@@ -0,0 +1,158 @@
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, it, expect, vi } from "vitest";
+import { renderWithProviders } from "../../../utils/render";
+import SegmentedToggle from "@/application/components/shared/SegmentedToggle";
+
+const OPTIONS = [
+  { value: "a" as const, label: "Option A" },
+  { value: "b" as const, label: "Option B" },
+  { value: "c" as const, label: "Option C" },
+];
+
+describe("SegmentedToggle — tab pattern", () => {
+  it("renders a tablist with role=tab on items", () => {
+    renderWithProviders(
+      <SegmentedToggle
+        value="a"
+        options={OPTIONS}
+        onChange={vi.fn()}
+        pattern="tab"
+        ariaLabel="View selector"
+      />,
+    );
+
+    expect(screen.getByRole("tablist")).toBeInTheDocument();
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs).toHaveLength(3);
+  });
+
+  it("sets aria-selected on the active tab only", () => {
+    renderWithProviders(
+      <SegmentedToggle value="b" options={OPTIONS} onChange={vi.fn()} pattern="tab" />,
+    );
+
+    const tabs = screen.getAllByRole("tab");
+    expect(tabs[0]).toHaveAttribute("aria-selected", "false");
+    expect(tabs[1]).toHaveAttribute("aria-selected", "true");
+    expect(tabs[2]).toHaveAttribute("aria-selected", "false");
+  });
+
+  it("does not set aria-pressed or aria-checked in tab mode", () => {
+    renderWithProviders(
+      <SegmentedToggle value="a" options={OPTIONS} onChange={vi.fn()} pattern="tab" />,
+    );
+
+    const tabs = screen.getAllByRole("tab");
+    for (const tab of tabs) {
+      expect(tab).not.toHaveAttribute("aria-pressed");
+      expect(tab).not.toHaveAttribute("aria-checked");
+    }
+  });
+
+  it("calls onChange when clicking a different tab", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+
+    renderWithProviders(
+      <SegmentedToggle value="a" options={OPTIONS} onChange={onChange} pattern="tab" />,
+    );
+
+    await user.click(screen.getByText("Option B"));
+    expect(onChange).toHaveBeenCalledWith("b");
+  });
+
+  it("does not call onChange when clicking the already-selected tab", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+
+    renderWithProviders(
+      <SegmentedToggle value="a" options={OPTIONS} onChange={onChange} pattern="tab" />,
+    );
+
+    await user.click(screen.getByText("Option A"));
+    expect(onChange).not.toHaveBeenCalled();
+  });
+});
+
+describe("SegmentedToggle — radio pattern", () => {
+  it("renders a radiogroup with role=radio on items", () => {
+    renderWithProviders(
+      <SegmentedToggle value="a" options={OPTIONS} onChange={vi.fn()} pattern="radio" />,
+    );
+
+    expect(screen.getByRole("radiogroup")).toBeInTheDocument();
+    const radios = screen.getAllByRole("radio");
+    expect(radios).toHaveLength(3);
+  });
+
+  it("sets aria-checked on the active radio only", () => {
+    renderWithProviders(
+      <SegmentedToggle value="c" options={OPTIONS} onChange={vi.fn()} pattern="radio" />,
+    );
+
+    const radios = screen.getAllByRole("radio");
+    expect(radios[0]).toHaveAttribute("aria-checked", "false");
+    expect(radios[1]).toHaveAttribute("aria-checked", "false");
+    expect(radios[2]).toHaveAttribute("aria-checked", "true");
+  });
+
+  it("implements roving tabindex — selected radio is 0, others are -1", () => {
+    renderWithProviders(
+      <SegmentedToggle value="b" options={OPTIONS} onChange={vi.fn()} pattern="radio" />,
+    );
+
+    const radios = screen.getAllByRole("radio");
+    expect(radios[0]).toHaveAttribute("tabindex", "-1");
+    expect(radios[1]).toHaveAttribute("tabindex", "0");
+    expect(radios[2]).toHaveAttribute("tabindex", "-1");
+  });
+
+  it("does not set aria-selected in radio mode", () => {
+    renderWithProviders(
+      <SegmentedToggle value="a" options={OPTIONS} onChange={vi.fn()} pattern="radio" />,
+    );
+
+    const radios = screen.getAllByRole("radio");
+    for (const radio of radios) {
+      expect(radio).not.toHaveAttribute("aria-selected");
+    }
+  });
+});
+
+describe("SegmentedToggle — toggle pattern", () => {
+  it("renders plain buttons with aria-pressed (no tablist/radiogroup role)", () => {
+    renderWithProviders(
+      <SegmentedToggle value="a" options={OPTIONS} onChange={vi.fn()} pattern="toggle" />,
+    );
+
+    expect(screen.queryByRole("tablist")).not.toBeInTheDocument();
+    expect(screen.queryByRole("radiogroup")).not.toBeInTheDocument();
+
+    const buttons = screen.getAllByRole("button");
+    expect(buttons).toHaveLength(3);
+  });
+
+  it("sets aria-pressed on the active toggle only", () => {
+    renderWithProviders(
+      <SegmentedToggle value="a" options={OPTIONS} onChange={vi.fn()} pattern="toggle" />,
+    );
+
+    const buttons = screen.getAllByRole("button");
+    expect(buttons[0]).toHaveAttribute("aria-pressed", "true");
+    expect(buttons[1]).toHaveAttribute("aria-pressed", "false");
+    expect(buttons[2]).toHaveAttribute("aria-pressed", "false");
+  });
+
+  it("does not set aria-selected or aria-checked in toggle mode", () => {
+    renderWithProviders(
+      <SegmentedToggle value="a" options={OPTIONS} onChange={vi.fn()} pattern="toggle" />,
+    );
+
+    const buttons = screen.getAllByRole("button");
+    for (const btn of buttons) {
+      expect(btn).not.toHaveAttribute("aria-selected");
+      expect(btn).not.toHaveAttribute("aria-checked");
+    }
+  });
+});
diff --git a/tests/unit/domain/entities/agentConfig.test.ts b/tests/unit/domain/entities/agentConfig.test.ts
index a2ba56b..7926044 100644
--- a/tests/unit/domain/entities/agentConfig.test.ts
+++ b/tests/unit/domain/entities/agentConfig.test.ts
@@ -1,8 +1,5 @@
 import { describe, it, expect } from "vitest";
-import {
-  MiddlewareType,
-  BackendType,
-} from "@/domain/entities/agent/agentConfig";
+import { MiddlewareType, BackendType } from "@/domain/entities/agent/agentConfig";
 import { McpTransportType } from "@/domain/entities/agent/mcpServerConfig";
 
 describe("MiddlewareType", () => {
diff --git a/tests/unit/domain/entities/agentConfigSchema.test.ts b/tests/unit/domain/entities/agentConfigSchema.test.ts
index 56d1d8e..d9c37b3 100644
--- a/tests/unit/domain/entities/agentConfigSchema.test.ts
+++ b/tests/unit/domain/entities/agentConfigSchema.test.ts
@@ -7,10 +7,7 @@ import {
   mcpServerConfigSchema,
   subAgentConfigSchema,
 } from "@/domain/entities/agent/agentConfigSchema";
-import {
-  BackendType,
-  MiddlewareType,
-} from "@/domain/entities/agent/agentConfig";
+import { BackendType, MiddlewareType } from "@/domain/entities/agent/agentConfig";
 import { McpTransportType } from "@/domain/entities/agent/mcpServerConfig";
 
 describe("interruptRuleSchema", () => {
diff --git a/tests/unit/domain/entities/fileEntry.test.ts b/tests/unit/domain/entities/fileEntry.test.ts
index d2eda64..56d5893 100644
--- a/tests/unit/domain/entities/fileEntry.test.ts
+++ b/tests/unit/domain/entities/fileEntry.test.ts
@@ -2,9 +2,7 @@ import { describe, it, expect } from "vitest";
 
 describe("FileEntry", () => {
   it("has objectName, size, and lastModified fields", async () => {
-    const { FileEntry } = await import(
-      "@/domain/entities/rag/fileEntry"
-    );
+    const { FileEntry } = await import("@/domain/entities/rag/fileEntry");
 
     const entry = new FileEntry({
       objectName: "docs/readme.md",
@@ -18,9 +16,7 @@ describe("FileEntry", () => {
   });
 
   it("allows null lastModified", async () => {
-    const { FileEntry } = await import(
-      "@/domain/entities/rag/fileEntry"
-    );
+    const { FileEntry } = await import("@/domain/entities/rag/fileEntry");
 
     const entry = new FileEntry({
       objectName: "docs/draft.txt",
@@ -32,9 +28,7 @@ describe("FileEntry", () => {
   });
 
   it("extracts filename as the last path segment", async () => {
-    const { FileEntry } = await import(
-      "@/domain/entities/rag/fileEntry"
-    );
+    const { FileEntry } = await import("@/domain/entities/rag/fileEntry");
 
     const entry = new FileEntry({
       objectName: "docs/reports/q1-summary.pdf",
@@ -46,9 +40,7 @@ describe("FileEntry", () => {
   });
 
   it("returns the full objectName as filename when no slashes", async () => {
-    const { FileEntry } = await import(
-      "@/domain/entities/rag/fileEntry"
-    );
+    const { FileEntry } = await import("@/domain/entities/rag/fileEntry");
 
     const entry = new FileEntry({
       objectName: "readme.md",
@@ -62,9 +54,7 @@ describe("FileEntry", () => {
 
 describe("FolderEntry", () => {
   it("has a prefix field ending with slash", async () => {
-    const { FolderEntry } = await import(
-      "@/domain/entities/rag/fileEntry"
-    );
+    const { FolderEntry } = await import("@/domain/entities/rag/fileEntry");
 
     const entry = new FolderEntry({ prefix: "docs/" });
 
@@ -72,9 +62,7 @@ describe("FolderEntry", () => {
   });
 
   it("extracts folder name without trailing slash", async () => {
-    const { FolderEntry } = await import(
-      "@/domain/entities/rag/fileEntry"
-    );
+    const { FolderEntry } = await import("@/domain/entities/rag/fileEntry");
 
     const entry = new FolderEntry({ prefix: "reports/2026/" });
 
@@ -82,9 +70,7 @@ describe("FolderEntry", () => {
   });
 
   it("returns prefix without slash as name for single-level folder", async () => {
-    const { FolderEntry } = await import(
-      "@/domain/entities/rag/fileEntry"
-    );
+    const { FolderEntry } = await import("@/domain/entities/rag/fileEntry");
 
     const entry = new FolderEntry({ prefix: "docs/" });
 
diff --git a/tests/unit/domain/entities/rag/fileContent.test.ts b/tests/unit/domain/entities/rag/fileContent.test.ts
index ed2cf8e..eb3f313 100644
--- a/tests/unit/domain/entities/rag/fileContent.test.ts
+++ b/tests/unit/domain/entities/rag/fileContent.test.ts
@@ -2,9 +2,7 @@ import { describe, it, expect } from "vitest";
 
 describe("DocumentMetadata", () => {
   it("allows constructing an object with format_type and mime_type", async () => {
-    const { DocumentMetadata } = await import(
-      "@/domain/entities/rag/fileContent"
-    );
+    const { DocumentMetadata } = await import("@/domain/entities/rag/fileContent");
 
     const metadata: DocumentMetadata = {
       format_type: "markdown",
@@ -16,9 +14,7 @@ describe("DocumentMetadata", () => {
   });
 
   it("accepts various format and mime type combinations", async () => {
-    const { DocumentMetadata } = await import(
-      "@/domain/entities/rag/fileContent"
-    );
+    const { DocumentMetadata } = await import("@/domain/entities/rag/fileContent");
 
     const pdfMeta: DocumentMetadata = {
       format_type: "pdf",
@@ -82,9 +78,7 @@ describe("TableData", () => {
 
 describe("FileContentResponse", () => {
   it("allows constructing a response with content, metadata, and tables", async () => {
-    const { FileContentResponse } = await import(
-      "@/domain/entities/rag/fileContent"
-    );
+    const { FileContentResponse } = await import("@/domain/entities/rag/fileContent");
 
     const response: FileContentResponse = {
       content: "This is the extracted text content.",
@@ -109,9 +103,7 @@ describe("FileContentResponse", () => {
   });
 
   it("allows constructing a response with empty tables", async () => {
-    const { FileContentResponse } = await import(
-      "@/domain/entities/rag/fileContent"
-    );
+    const { FileContentResponse } = await import("@/domain/entities/rag/fileContent");
 
     const response: FileContentResponse = {
       content: "Plain text with no tables.",
@@ -127,9 +119,7 @@ describe("FileContentResponse", () => {
   });
 
   it("allows constructing a response with multiple tables", async () => {
-    const { FileContentResponse } = await import(
-      "@/domain/entities/rag/fileContent"
-    );
+    const { FileContentResponse } = await import("@/domain/entities/rag/fileContent");
 
     const response: FileContentResponse = {
       content: "Document with multiple tables.",
@@ -144,7 +134,10 @@ describe("FileContentResponse", () => {
         },
         {
           headers: ["X", "Y"],
-          rows: [["3", "4"], ["5", "6"]],
+          rows: [
+            ["3", "4"],
+            ["5", "6"],
+          ],
         },
       ],
     };
@@ -156,4 +149,4 @@ describe("FileContentResponse", () => {
       ["5", "6"],
     ]);
   });
-});
\ No newline at end of file
+});
diff --git a/tests/unit/domain/entities/rag/indexingRequest.test.ts b/tests/unit/domain/entities/rag/indexingRequest.test.ts
index 412288e..bbb1a17 100644
--- a/tests/unit/domain/entities/rag/indexingRequest.test.ts
+++ b/tests/unit/domain/entities/rag/indexingRequest.test.ts
@@ -2,9 +2,7 @@ import { describe, it, expect } from "vitest";
 
 describe("IndexFileRequest", () => {
   it("allows constructing an object with all required fields", async () => {
-    const { IndexFileRequest } = await import(
-      "@/domain/entities/rag/indexingRequest"
-    );
+    const { IndexFileRequest } = await import("@/domain/entities/rag/indexingRequest");
 
     const request: IndexFileRequest = {
       file_name: "report.pdf",
@@ -16,9 +14,7 @@ describe("IndexFileRequest", () => {
   });
 
   it("accepts various file name formats", async () => {
-    const { IndexFileRequest } = await import(
-      "@/domain/entities/rag/indexingRequest"
-    );
+    const { IndexFileRequest } = await import("@/domain/entities/rag/indexingRequest");
 
     const mdRequest: IndexFileRequest = {
       file_name: "docs/guide.md",
@@ -38,9 +34,7 @@ describe("IndexFileRequest", () => {
 
 describe("IndexFolderRequest", () => {
   it("allows constructing an object with all required fields", async () => {
-    const { IndexFolderRequest } = await import(
-      "@/domain/entities/rag/indexingRequest"
-    );
+    const { IndexFolderRequest } = await import("@/domain/entities/rag/indexingRequest");
 
     const request: IndexFolderRequest = {
       working_dir: "/data/projects/acme",
@@ -52,9 +46,7 @@ describe("IndexFolderRequest", () => {
   });
 
   it("accepts optional file_extensions", async () => {
-    const { IndexFolderRequest } = await import(
-      "@/domain/entities/rag/indexingRequest"
-    );
+    const { IndexFolderRequest } = await import("@/domain/entities/rag/indexingRequest");
 
     const withExtensions: IndexFolderRequest = {
       working_dir: "/data/projects/acme",
@@ -66,9 +58,7 @@ describe("IndexFolderRequest", () => {
   });
 
   it("allows omitting optional file_extensions", async () => {
-    const { IndexFolderRequest } = await import(
-      "@/domain/entities/rag/indexingRequest"
-    );
+    const { IndexFolderRequest } = await import("@/domain/entities/rag/indexingRequest");
 
     const withoutExtensions: IndexFolderRequest = {
       working_dir: "/data/projects/acme",
@@ -79,9 +69,7 @@ describe("IndexFolderRequest", () => {
   });
 
   it("supports non-recursive folder indexing", async () => {
-    const { IndexFolderRequest } = await import(
-      "@/domain/entities/rag/indexingRequest"
-    );
+    const { IndexFolderRequest } = await import("@/domain/entities/rag/indexingRequest");
 
     const request: IndexFolderRequest = {
       working_dir: "/data/docs",
@@ -94,9 +82,7 @@ describe("IndexFolderRequest", () => {
 
 describe("ClassicalIndexFileRequest", () => {
   it("allows constructing an object with all required fields", async () => {
-    const { ClassicalIndexFileRequest } = await import(
-      "@/domain/entities/rag/indexingRequest"
-    );
+    const { ClassicalIndexFileRequest } = await import("@/domain/entities/rag/indexingRequest");
 
     const request: ClassicalIndexFileRequest = {
       file_name: "handbook.docx",
@@ -112,9 +98,7 @@ describe("ClassicalIndexFileRequest", () => {
   });
 
   it("accepts different chunk configurations", async () => {
-    const { ClassicalIndexFileRequest } = await import(
-      "@/domain/entities/rag/indexingRequest"
-    );
+    const { ClassicalIndexFileRequest } = await import("@/domain/entities/rag/indexingRequest");
 
     const smallChunks: ClassicalIndexFileRequest = {
       file_name: "data.csv",
@@ -140,9 +124,7 @@ describe("ClassicalIndexFileRequest", () => {
 
 describe("ClassicalIndexFolderRequest", () => {
   it("allows constructing an object with all required fields", async () => {
-    const { ClassicalIndexFolderRequest } = await import(
-      "@/domain/entities/rag/indexingRequest"
-    );
+    const { ClassicalIndexFolderRequest } = await import("@/domain/entities/rag/indexingRequest");
 
     const request: ClassicalIndexFolderRequest = {
       working_dir: "/data/projects/acme",
@@ -158,9 +140,7 @@ describe("ClassicalIndexFolderRequest", () => {
   });
 
   it("accepts optional file_extensions", async () => {
-    const { ClassicalIndexFolderRequest } = await import(
-      "@/domain/entities/rag/indexingRequest"
-    );
+    const { ClassicalIndexFolderRequest } = await import("@/domain/entities/rag/indexingRequest");
 
     const withExtensions: ClassicalIndexFolderRequest = {
       working_dir: "/data/docs",
@@ -174,9 +154,7 @@ describe("ClassicalIndexFolderRequest", () => {
   });
 
   it("allows omitting optional file_extensions", async () => {
-    const { ClassicalIndexFolderRequest } = await import(
-      "@/domain/entities/rag/indexingRequest"
-    );
+    const { ClassicalIndexFolderRequest } = await import("@/domain/entities/rag/indexingRequest");
 
     const withoutExtensions: ClassicalIndexFolderRequest = {
       working_dir: "/data/docs",
@@ -187,4 +165,4 @@ describe("ClassicalIndexFolderRequest", () => {
 
     expect(withoutExtensions.file_extensions).toBeUndefined();
   });
-});
\ No newline at end of file
+});
diff --git a/tests/unit/domain/entities/rag/queryRequest.test.ts b/tests/unit/domain/entities/rag/queryRequest.test.ts
index 3fbe070..5602ecf 100644
--- a/tests/unit/domain/entities/rag/queryRequest.test.ts
+++ b/tests/unit/domain/entities/rag/queryRequest.test.ts
@@ -2,9 +2,7 @@ import { describe, it, expect } from "vitest";
 
 describe("LightRAGQueryRequest", () => {
   it("allows constructing an object with all required fields", async () => {
-    const { LightRAGQueryRequest } = await import(
-      "@/domain/entities/rag/queryRequest"
-    );
+    const { LightRAGQueryRequest } = await import("@/domain/entities/rag/queryRequest");
 
     const request: LightRAGQueryRequest = {
       working_dir: "/data/projects/acme",
@@ -20,9 +18,7 @@ describe("LightRAGQueryRequest", () => {
   });
 
   it("accepts all valid QueryMode values", async () => {
-    const { LightRAGQueryRequest, QueryMode } = await import(
-      "@/domain/entities/rag/queryRequest"
-    );
+    const { LightRAGQueryRequest, QueryMode } = await import("@/domain/entities/rag/queryRequest");
 
     const validModes: QueryMode[] = [
       "naive",
@@ -49,9 +45,7 @@ describe("LightRAGQueryRequest", () => {
 
 describe("ClassicalQueryRequest", () => {
   it("allows constructing an object with all required fields", async () => {
-    const { ClassicalQueryRequest } = await import(
-      "@/domain/entities/rag/queryRequest"
-    );
+    const { ClassicalQueryRequest } = await import("@/domain/entities/rag/queryRequest");
 
     const request: ClassicalQueryRequest = {
       working_dir: "/data/projects/acme",
@@ -73,9 +67,7 @@ describe("ClassicalQueryRequest", () => {
   });
 
   it("accepts optional vector_distance_threshold", async () => {
-    const { ClassicalQueryRequest } = await import(
-      "@/domain/entities/rag/queryRequest"
-    );
+    const { ClassicalQueryRequest } = await import("@/domain/entities/rag/queryRequest");
 
     const withThreshold: ClassicalQueryRequest = {
       working_dir: "/data/test",
@@ -92,9 +84,7 @@ describe("ClassicalQueryRequest", () => {
   });
 
   it("allows omitting optional vector_distance_threshold", async () => {
-    const { ClassicalQueryRequest } = await import(
-      "@/domain/entities/rag/queryRequest"
-    );
+    const { ClassicalQueryRequest } = await import("@/domain/entities/rag/queryRequest");
 
     const withoutThreshold: ClassicalQueryRequest = {
       working_dir: "/data/test",
@@ -110,9 +100,7 @@ describe("ClassicalQueryRequest", () => {
   });
 
   it("accepts all valid ClassicalQueryMode values", async () => {
-    const { ClassicalQueryMode } = await import(
-      "@/domain/entities/rag/queryRequest"
-    );
+    const { ClassicalQueryMode } = await import("@/domain/entities/rag/queryRequest");
 
     const validModes: ClassicalQueryMode[] = ["vector", "hybrid"];
 
@@ -133,9 +121,7 @@ describe("ClassicalQueryRequest", () => {
 
 describe("RagQueryResponse", () => {
   it("allows constructing a response with status and data", async () => {
-    const { RagQueryResponse } = await import(
-      "@/domain/entities/rag/queryRequest"
-    );
+    const { RagQueryResponse } = await import("@/domain/entities/rag/queryRequest");
 
     const response: RagQueryResponse = {
       status: "success",
@@ -147,9 +133,7 @@ describe("RagQueryResponse", () => {
   });
 
   it("allows including optional message and metadata", async () => {
-    const { RagQueryResponse } = await import(
-      "@/domain/entities/rag/queryRequest"
-    );
+    const { RagQueryResponse } = await import("@/domain/entities/rag/queryRequest");
 
     const response: RagQueryResponse = {
       status: "success",
@@ -163,9 +147,7 @@ describe("RagQueryResponse", () => {
   });
 
   it("allows constructing an error response", async () => {
-    const { RagQueryResponse } = await import(
-      "@/domain/entities/rag/queryRequest"
-    );
+    const { RagQueryResponse } = await import("@/domain/entities/rag/queryRequest");
 
     const response: RagQueryResponse = {
       status: "error",
@@ -178,9 +160,7 @@ describe("RagQueryResponse", () => {
   });
 
   it("allows omitting optional message and metadata", async () => {
-    const { RagQueryResponse } = await import(
-      "@/domain/entities/rag/queryRequest"
-    );
+    const { RagQueryResponse } = await import("@/domain/entities/rag/queryRequest");
 
     const response: RagQueryResponse = {
       status: "success",
@@ -190,4 +170,4 @@ describe("RagQueryResponse", () => {
     expect(response.message).toBeUndefined();
     expect(response.metadata).toBeUndefined();
   });
-});
\ No newline at end of file
+});
diff --git a/tests/unit/hooks/agent/useAgentConfig.test.tsx b/tests/unit/hooks/agent/useAgentConfig.test.tsx
index 03f5409..24fc0b1 100644
--- a/tests/unit/hooks/agent/useAgentConfig.test.tsx
+++ b/tests/unit/hooks/agent/useAgentConfig.test.tsx
@@ -3,10 +3,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { vi, describe, it, expect, beforeEach } from "vitest";
 import { useAgentConfig } from "@/application/hooks/agent/useAgentConfig";
 import { agentApi } from "@/infrastructure/api/agent/agentApi";
-import type {
-  AgentConfig,
-  BackendType,
-} from "@/domain/entities/agent/agentConfig";
+import type { AgentConfig, BackendType } from "@/domain/entities/agent/agentConfig";
 import type { ReactNode } from "react";
 
 vi.mock("@/infrastructure/api/agent/agentApi", () => ({
diff --git a/tests/unit/hooks/agent/useCreateAgent.test.tsx b/tests/unit/hooks/agent/useCreateAgent.test.tsx
index 65eeb0f..c5663bd 100644
--- a/tests/unit/hooks/agent/useCreateAgent.test.tsx
+++ b/tests/unit/hooks/agent/useCreateAgent.test.tsx
@@ -3,10 +3,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { vi, describe, it, expect, beforeEach } from "vitest";
 import { useCreateAgent } from "@/application/hooks/agent/useCreateAgent";
 import { agentApi } from "@/infrastructure/api/agent/agentApi";
-import type {
-  AgentConfig,
-  BackendType,
-} from "@/domain/entities/agent/agentConfig";
+import type { AgentConfig, BackendType } from "@/domain/entities/agent/agentConfig";
 import type { ReactNode } from "react";
 
 vi.mock("@/infrastructure/api/agent/agentApi", () => ({
diff --git a/tests/unit/hooks/agent/useUpdateAgent.test.tsx b/tests/unit/hooks/agent/useUpdateAgent.test.tsx
index b614384..0506e81 100644
--- a/tests/unit/hooks/agent/useUpdateAgent.test.tsx
+++ b/tests/unit/hooks/agent/useUpdateAgent.test.tsx
@@ -3,10 +3,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { vi, describe, it, expect, beforeEach } from "vitest";
 import { useUpdateAgent } from "@/application/hooks/agent/useUpdateAgent";
 import { agentApi } from "@/infrastructure/api/agent/agentApi";
-import type {
-  AgentConfig,
-  BackendType,
-} from "@/domain/entities/agent/agentConfig";
+import type { AgentConfig, BackendType } from "@/domain/entities/agent/agentConfig";
 import type { ReactNode } from "react";
 
 vi.mock("@/infrastructure/api/agent/agentApi", () => ({
@@ -92,9 +89,7 @@ describe("useUpdateAgent", () => {
   });
 
   it("returns error state when update fails", async () => {
-    vi.mocked(agentApi.updateAgent).mockRejectedValue(
-      new Error("Invalid YAML"),
-    );
+    vi.mocked(agentApi.updateAgent).mockRejectedValue(new Error("Invalid YAML"));
     const { wrapper } = createWrapper();
     const file = new File(["invalid"], "bad.yaml", {
       type: "application/x-yaml",
diff --git a/tests/unit/hooks/chat/useCreateThread.test.tsx b/tests/unit/hooks/chat/useCreateThread.test.tsx
index 852a517..a516eee 100644
--- a/tests/unit/hooks/chat/useCreateThread.test.tsx
+++ b/tests/unit/hooks/chat/useCreateThread.test.tsx
@@ -77,9 +77,7 @@ describe("useCreateThread", () => {
   });
 
   it("returns error state when creation fails", async () => {
-    vi.mocked(chatApi.createThread).mockRejectedValue(
-      new Error("Agent not found"),
-    );
+    vi.mocked(chatApi.createThread).mockRejectedValue(new Error("Agent not found"));
     const { wrapper } = createWrapper();
 
     const { result } = renderHook(() => useCreateThread(), { wrapper });
diff --git a/tests/unit/hooks/chat/useDeleteThread.test.tsx b/tests/unit/hooks/chat/useDeleteThread.test.tsx
index 19396e6..b0cad1d 100644
--- a/tests/unit/hooks/chat/useDeleteThread.test.tsx
+++ b/tests/unit/hooks/chat/useDeleteThread.test.tsx
@@ -67,9 +67,7 @@ describe("useDeleteThread", () => {
   });
 
   it("returns error state when deletion fails", async () => {
-    vi.mocked(chatApi.deleteThread).mockRejectedValue(
-      new Error("Thread not found"),
-    );
+    vi.mocked(chatApi.deleteThread).mockRejectedValue(new Error("Thread not found"));
     const { wrapper } = createWrapper();
 
     const { result } = renderHook(() => useDeleteThread(), { wrapper });
diff --git a/tests/unit/hooks/chat/useMessages.test.tsx b/tests/unit/hooks/chat/useMessages.test.tsx
index fdc3610..a433533 100644
--- a/tests/unit/hooks/chat/useMessages.test.tsx
+++ b/tests/unit/hooks/chat/useMessages.test.tsx
@@ -59,9 +59,7 @@ describe("useMessages", () => {
   });
 
   it("returns error state when API call fails", async () => {
-    vi.mocked(chatApi.getMessages).mockRejectedValue(
-      new Error("Thread not found"),
-    );
+    vi.mocked(chatApi.getMessages).mockRejectedValue(new Error("Thread not found"));
 
     const { result } = renderHook(() => useMessages("bad-thread"), {
       wrapper: createWrapper(),
diff --git a/tests/unit/hooks/chat/useSendMessage.test.tsx b/tests/unit/hooks/chat/useSendMessage.test.tsx
index 8cead14..f32967c 100644
--- a/tests/unit/hooks/chat/useSendMessage.test.tsx
+++ b/tests/unit/hooks/chat/useSendMessage.test.tsx
@@ -71,9 +71,7 @@ describe("useSendMessage", () => {
     });
 
     await waitFor(() => expect(result.current.isError).toBe(true));
-    expect(result.current.error?.message).toBe(
-      "Cannot send message without an active thread",
-    );
+    expect(result.current.error?.message).toBe("Cannot send message without an active thread");
   });
 
   it("invalidates messages query on success", async () => {
diff --git a/tests/unit/hooks/chat/useThreads.test.tsx b/tests/unit/hooks/chat/useThreads.test.tsx
index 49d1800..58e567a 100644
--- a/tests/unit/hooks/chat/useThreads.test.tsx
+++ b/tests/unit/hooks/chat/useThreads.test.tsx
@@ -49,9 +49,7 @@ describe("useThreads", () => {
   });
 
   it("returns error state when API call fails", async () => {
-    vi.mocked(chatApi.listThreads).mockRejectedValue(
-      new Error("Network error"),
-    );
+    vi.mocked(chatApi.listThreads).mockRejectedValue(new Error("Network error"));
 
     const { result } = renderHook(() => useThreads(), {
       wrapper: createWrapper(),
diff --git a/tests/unit/hooks/rag/useClassicalIndexFile.test.tsx b/tests/unit/hooks/rag/useClassicalIndexFile.test.tsx
index 6b2fd24..981398a 100644
--- a/tests/unit/hooks/rag/useClassicalIndexFile.test.tsx
+++ b/tests/unit/hooks/rag/useClassicalIndexFile.test.tsx
@@ -48,7 +48,12 @@ describe("useClassicalIndexFile", () => {
     const { result } = renderHook(() => useClassicalIndexFile(), { wrapper });
 
     act(() => {
-      result.current.mutate({ fileName: "report.pdf", workingDir: "/data/docs", chunkSize: 1000, chunkOverlap: 200 });
+      result.current.mutate({
+        fileName: "report.pdf",
+        workingDir: "/data/docs",
+        chunkSize: 1000,
+        chunkOverlap: 200,
+      });
     });
 
     await waitFor(() => expect(result.current.isSuccess).toBe(true));
@@ -68,7 +73,12 @@ describe("useClassicalIndexFile", () => {
     const { result } = renderHook(() => useClassicalIndexFile(), { wrapper });
 
     act(() => {
-      result.current.mutate({ fileName: "report.pdf", workingDir: "/data/docs", chunkSize: 1000, chunkOverlap: 200 });
+      result.current.mutate({
+        fileName: "report.pdf",
+        workingDir: "/data/docs",
+        chunkSize: 1000,
+        chunkOverlap: 200,
+      });
     });
 
     await waitFor(() => expect(result.current.isSuccess).toBe(true));
@@ -83,7 +93,12 @@ describe("useClassicalIndexFile", () => {
     const { result } = renderHook(() => useClassicalIndexFile(), { wrapper });
 
     act(() => {
-      result.current.mutate({ fileName: "report.pdf", workingDir: "/data/docs", chunkSize: 1000, chunkOverlap: 200 });
+      result.current.mutate({
+        fileName: "report.pdf",
+        workingDir: "/data/docs",
+        chunkSize: 1000,
+        chunkOverlap: 200,
+      });
     });
 
     await waitFor(() => expect(result.current.isError).toBe(true));
@@ -102,7 +117,12 @@ describe("useClassicalIndexFile", () => {
     expect(result.current.isPending).toBe(false);
 
     act(() => {
-      result.current.mutate({ fileName: "report.pdf", workingDir: "/data/docs", chunkSize: 1000, chunkOverlap: 200 });
+      result.current.mutate({
+        fileName: "report.pdf",
+        workingDir: "/data/docs",
+        chunkSize: 1000,
+        chunkOverlap: 200,
+      });
     });
 
     await waitFor(() => expect(result.current.isPending).toBe(true));
@@ -114,4 +134,4 @@ describe("useClassicalIndexFile", () => {
     await waitFor(() => expect(result.current.isPending).toBe(false));
     expect(result.current.isSuccess).toBe(true);
   });
-});
\ No newline at end of file
+});
diff --git a/tests/unit/hooks/rag/useClassicalIndexFolder.test.tsx b/tests/unit/hooks/rag/useClassicalIndexFolder.test.tsx
index 17c3c2a..98a4acd 100644
--- a/tests/unit/hooks/rag/useClassicalIndexFolder.test.tsx
+++ b/tests/unit/hooks/rag/useClassicalIndexFolder.test.tsx
@@ -48,7 +48,12 @@ describe("useClassicalIndexFolder", () => {
     const { result } = renderHook(() => useClassicalIndexFolder(), { wrapper });
 
     act(() => {
-      result.current.mutate({ workingDir: "/data/docs", recursive: true, chunkSize: 1000, chunkOverlap: 200 });
+      result.current.mutate({
+        workingDir: "/data/docs",
+        recursive: true,
+        chunkSize: 1000,
+        chunkOverlap: 200,
+      });
     });
 
     await waitFor(() => expect(result.current.isSuccess).toBe(true));
@@ -69,7 +74,12 @@ describe("useClassicalIndexFolder", () => {
     const { result } = renderHook(() => useClassicalIndexFolder(), { wrapper });
 
     act(() => {
-      result.current.mutate({ workingDir: "/data/docs", recursive: true, chunkSize: 1000, chunkOverlap: 200 });
+      result.current.mutate({
+        workingDir: "/data/docs",
+        recursive: true,
+        chunkSize: 1000,
+        chunkOverlap: 200,
+      });
     });
 
     await waitFor(() => expect(result.current.isSuccess).toBe(true));
@@ -84,7 +94,12 @@ describe("useClassicalIndexFolder", () => {
     const { result } = renderHook(() => useClassicalIndexFolder(), { wrapper });
 
     act(() => {
-      result.current.mutate({ workingDir: "/data/docs", recursive: true, chunkSize: 1000, chunkOverlap: 200 });
+      result.current.mutate({
+        workingDir: "/data/docs",
+        recursive: true,
+        chunkSize: 1000,
+        chunkOverlap: 200,
+      });
     });
 
     await waitFor(() => expect(result.current.isError).toBe(true));
@@ -103,7 +118,12 @@ describe("useClassicalIndexFolder", () => {
     expect(result.current.isPending).toBe(false);
 
     act(() => {
-      result.current.mutate({ workingDir: "/data/docs", recursive: true, chunkSize: 1000, chunkOverlap: 200 });
+      result.current.mutate({
+        workingDir: "/data/docs",
+        recursive: true,
+        chunkSize: 1000,
+        chunkOverlap: 200,
+      });
     });
 
     await waitFor(() => expect(result.current.isPending).toBe(true));
@@ -115,4 +135,4 @@ describe("useClassicalIndexFolder", () => {
     await waitFor(() => expect(result.current.isPending).toBe(false));
     expect(result.current.isSuccess).toBe(true);
   });
-});
\ No newline at end of file
+});
diff --git a/tests/unit/hooks/rag/useClassicalQuery.test.tsx b/tests/unit/hooks/rag/useClassicalQuery.test.tsx
index c9a8c06..c1b52a6 100644
--- a/tests/unit/hooks/rag/useClassicalQuery.test.tsx
+++ b/tests/unit/hooks/rag/useClassicalQuery.test.tsx
@@ -98,9 +98,7 @@ describe("useClassicalQuery", () => {
   });
 
   it("sets error state on failure", async () => {
-    vi.mocked(ragQueryApi.queryClassical).mockRejectedValue(
-      new Error("Query failed"),
-    );
+    vi.mocked(ragQueryApi.queryClassical).mockRejectedValue(new Error("Query failed"));
     const { wrapper } = createWrapper();
 
     const { result } = renderHook(() => useClassicalQuery(), { wrapper });
@@ -121,4 +119,4 @@ describe("useClassicalQuery", () => {
     expect(result.current.error).toBeInstanceOf(Error);
     expect(result.current.error?.message).toBe("Query failed");
   });
-});
\ No newline at end of file
+});
diff --git a/tests/unit/hooks/rag/useFiles.test.tsx b/tests/unit/hooks/rag/useFiles.test.tsx
index 56f2673..06eb0aa 100644
--- a/tests/unit/hooks/rag/useFiles.test.tsx
+++ b/tests/unit/hooks/rag/useFiles.test.tsx
@@ -57,9 +57,7 @@ describe("useFiles", () => {
   });
 
   it("handles API errors", async () => {
-    vi.mocked(ragApi.listFiles).mockRejectedValue(
-      new Error("Server error"),
-    );
+    vi.mocked(ragApi.listFiles).mockRejectedValue(new Error("Server error"));
 
     const { result } = renderHook(() => useFiles(""), {
       wrapper: createWrapper(),
diff --git a/tests/unit/hooks/rag/useFolders.test.tsx b/tests/unit/hooks/rag/useFolders.test.tsx
index f906908..9cbb441 100644
--- a/tests/unit/hooks/rag/useFolders.test.tsx
+++ b/tests/unit/hooks/rag/useFolders.test.tsx
@@ -51,9 +51,7 @@ describe("useFolders", () => {
   });
 
   it("handles API errors", async () => {
-    vi.mocked(ragApi.listFolders).mockRejectedValue(
-      new Error("Network error"),
-    );
+    vi.mocked(ragApi.listFolders).mockRejectedValue(new Error("Network error"));
 
     const { result } = renderHook(() => useFolders(""), {
       wrapper: createWrapper(),
diff --git a/tests/unit/hooks/rag/useIndexFile.test.tsx b/tests/unit/hooks/rag/useIndexFile.test.tsx
index 25e73f1..9be2df9 100644
--- a/tests/unit/hooks/rag/useIndexFile.test.tsx
+++ b/tests/unit/hooks/rag/useIndexFile.test.tsx
@@ -112,4 +112,4 @@ describe("useIndexFile", () => {
     await waitFor(() => expect(result.current.isPending).toBe(false));
     expect(result.current.isSuccess).toBe(true);
   });
-});
\ No newline at end of file
+});
diff --git a/tests/unit/hooks/rag/useIndexFolder.test.tsx b/tests/unit/hooks/rag/useIndexFolder.test.tsx
index 33efbf6..20a42f0 100644
--- a/tests/unit/hooks/rag/useIndexFolder.test.tsx
+++ b/tests/unit/hooks/rag/useIndexFolder.test.tsx
@@ -113,4 +113,4 @@ describe("useIndexFolder", () => {
     await waitFor(() => expect(result.current.isPending).toBe(false));
     expect(result.current.isSuccess).toBe(true);
   });
-});
\ No newline at end of file
+});
diff --git a/tests/unit/hooks/rag/useRagQuery.test.tsx b/tests/unit/hooks/rag/useRagQuery.test.tsx
index e02113a..f16c596 100644
--- a/tests/unit/hooks/rag/useRagQuery.test.tsx
+++ b/tests/unit/hooks/rag/useRagQuery.test.tsx
@@ -40,7 +40,12 @@ describe("useRagQuery", () => {
     const { result } = renderHook(() => useRagQuery(), { wrapper });
 
     act(() => {
-      result.current.mutate({ workingDir: "/data/project", query: "What is RAG?", mode: "hybrid", topK: 5 });
+      result.current.mutate({
+        workingDir: "/data/project",
+        query: "What is RAG?",
+        mode: "hybrid",
+        topK: 5,
+      });
     });
 
     await waitFor(() => expect(result.current.isSuccess).toBe(true));
@@ -64,7 +69,12 @@ describe("useRagQuery", () => {
     expect(result.current.isPending).toBe(false);
 
     act(() => {
-      result.current.mutate({ workingDir: "/data/project", query: "What is RAG?", mode: "hybrid", topK: 5 });
+      result.current.mutate({
+        workingDir: "/data/project",
+        query: "What is RAG?",
+        mode: "hybrid",
+        topK: 5,
+      });
     });
 
     await waitFor(() => expect(result.current.isPending).toBe(true));
@@ -78,19 +88,22 @@ describe("useRagQuery", () => {
   });
 
   it("sets error state on failure", async () => {
-    vi.mocked(ragQueryApi.queryLightRAG).mockRejectedValue(
-      new Error("Query failed"),
-    );
+    vi.mocked(ragQueryApi.queryLightRAG).mockRejectedValue(new Error("Query failed"));
     const { wrapper } = createWrapper();
 
     const { result } = renderHook(() => useRagQuery(), { wrapper });
 
     act(() => {
-      result.current.mutate({ workingDir: "/data/project", query: "What is RAG?", mode: "hybrid", topK: 5 });
+      result.current.mutate({
+        workingDir: "/data/project",
+        query: "What is RAG?",
+        mode: "hybrid",
+        topK: 5,
+      });
     });
 
     await waitFor(() => expect(result.current.isError).toBe(true));
     expect(result.current.error).toBeInstanceOf(Error);
     expect(result.current.error?.message).toBe("Query failed");
   });
-});
\ No newline at end of file
+});
diff --git a/tests/unit/hooks/rag/useReadFile.test.tsx b/tests/unit/hooks/rag/useReadFile.test.tsx
index 2abbee1..18ea66c 100644
--- a/tests/unit/hooks/rag/useReadFile.test.tsx
+++ b/tests/unit/hooks/rag/useReadFile.test.tsx
@@ -39,7 +39,11 @@ describe("useReadFile", () => {
   });
 
   it("calls ragFileContentApi.readFile with filePath", async () => {
-    const mockContent = { content: "file contents here", metadata: { format_type: "markdown", mime_type: "text/markdown" }, tables: [] };
+    const mockContent = {
+      content: "file contents here",
+      metadata: { format_type: "markdown", mime_type: "text/markdown" },
+      tables: [],
+    };
     vi.mocked(ragFileContentApi.readFile).mockResolvedValue(mockContent);
     const { wrapper } = createWrapper();
 
@@ -86,7 +90,11 @@ describe("useReadFile", () => {
     await waitFor(() => expect(result.current.isPending).toBe(true));
 
     act(() => {
-      resolveMutation({ content: "done", metadata: { format_type: "text", mime_type: "text/plain" }, tables: [] });
+      resolveMutation({
+        content: "done",
+        metadata: { format_type: "text", mime_type: "text/plain" },
+        tables: [],
+      });
     });
 
     await waitFor(() => expect(result.current.isPending).toBe(false));
@@ -94,9 +102,7 @@ describe("useReadFile", () => {
   });
 
   it("sets error state on failure", async () => {
-    vi.mocked(ragFileContentApi.readFile).mockRejectedValue(
-      new Error("File not found"),
-    );
+    vi.mocked(ragFileContentApi.readFile).mockRejectedValue(new Error("File not found"));
     const { wrapper } = createWrapper();
 
     const { result } = renderHook(() => useReadFile(), { wrapper });
@@ -109,4 +115,4 @@ describe("useReadFile", () => {
     expect(result.current.error).toBeInstanceOf(Error);
     expect(result.current.error?.message).toBe("File not found");
   });
-});
\ No newline at end of file
+});
diff --git a/tests/unit/infrastructure/api/agent/agentApi.test.ts b/tests/unit/infrastructure/api/agent/agentApi.test.ts
index 66d13a1..3d8ed67 100644
--- a/tests/unit/infrastructure/api/agent/agentApi.test.ts
+++ b/tests/unit/infrastructure/api/agent/agentApi.test.ts
@@ -59,11 +59,9 @@ describe("agentApi", () => {
 
       const result = await agentApi.createAgent("new-agent", file);
 
-      expect(apiClient.post).toHaveBeenCalledWith(
-        "/api/v1/agents",
-        expect.any(FormData),
-        { headers: { "Content-Type": "multipart/form-data" } },
-      );
+      expect(apiClient.post).toHaveBeenCalledWith("/api/v1/agents", expect.any(FormData), {
+        headers: { "Content-Type": "multipart/form-data" },
+      });
       expect(result).toEqual(config);
     });
   });
@@ -93,9 +91,7 @@ describe("agentApi", () => {
 
       await agentApi.deleteAgent("test-agent");
 
-      expect(apiClient.delete).toHaveBeenCalledWith(
-        "/api/v1/agents/test-agent",
-      );
+      expect(apiClient.delete).toHaveBeenCalledWith("/api/v1/agents/test-agent");
     });
   });
 });
diff --git a/tests/unit/infrastructure/api/chat/chatApi.test.ts b/tests/unit/infrastructure/api/chat/chatApi.test.ts
index d6cb071..1bac951 100644
--- a/tests/unit/infrastructure/api/chat/chatApi.test.ts
+++ b/tests/unit/infrastructure/api/chat/chatApi.test.ts
@@ -64,9 +64,7 @@ describe("chatApi", () => {
 
       await chatApi.deleteThread("thread-123");
 
-      expect(apiClient.delete).toHaveBeenCalledWith(
-        "/api/v1/threads/thread-123",
-      );
+      expect(apiClient.delete).toHaveBeenCalledWith("/api/v1/threads/thread-123");
     });
   });
 
@@ -77,9 +75,7 @@ describe("chatApi", () => {
 
       const result = await chatApi.getMessages("thread-123");
 
-      expect(apiClient.get).toHaveBeenCalledWith(
-        "/api/v1/threads/thread-123/messages",
-      );
+      expect(apiClient.get).toHaveBeenCalledWith("/api/v1/threads/thread-123/messages");
       expect(result).toEqual(messages);
     });
   });
@@ -93,9 +89,13 @@ describe("chatApi", () => {
         message: "Hello",
       });
 
-      expect(apiClient.post).toHaveBeenCalledWith("/api/v1/chat/thread-123", {
-        message: "Hello",
-      }, { timeout: 300000 });
+      expect(apiClient.post).toHaveBeenCalledWith(
+        "/api/v1/chat/thread-123",
+        {
+          message: "Hello",
+        },
+        { timeout: 300000 },
+      );
       expect(result).toEqual(message);
     });
   });
diff --git a/tests/unit/infrastructure/api/rag/ragApi.test.ts b/tests/unit/infrastructure/api/rag/ragApi.test.ts
index 2177da5..bf09d75 100644
--- a/tests/unit/infrastructure/api/rag/ragApi.test.ts
+++ b/tests/unit/infrastructure/api/rag/ragApi.test.ts
@@ -39,9 +39,7 @@ describe("ragApi", () => {
 
       const result = await ragApi.listFolders("docs/");
 
-      expect(ragApiClient.get).toHaveBeenCalledWith(
-        "/api/v1/files/folders?prefix=docs%2F",
-      );
+      expect(ragApiClient.get).toHaveBeenCalledWith("/api/v1/files/folders?prefix=docs%2F");
       expect(result).toHaveLength(1);
       expect(result[0].prefix).toBe("docs/reports/");
       expect(result[0].name).toBe("reports");
@@ -61,9 +59,7 @@ describe("ragApi", () => {
 
       const result = await ragApi.listFiles("");
 
-      expect(ragApiClient.get).toHaveBeenCalledWith(
-        "/api/v1/files/list?prefix=&recursive=false",
-      );
+      expect(ragApiClient.get).toHaveBeenCalledWith("/api/v1/files/list?prefix=&recursive=false");
       expect(result).toEqual([
         {
           objectName: "readme.md",
diff --git a/tests/unit/infrastructure/api/rag/ragFileContentApi.test.ts b/tests/unit/infrastructure/api/rag/ragFileContentApi.test.ts
index 7f36674..94b06b8 100644
--- a/tests/unit/infrastructure/api/rag/ragFileContentApi.test.ts
+++ b/tests/unit/infrastructure/api/rag/ragFileContentApi.test.ts
@@ -126,23 +126,17 @@ describe("ragFileContentApi", () => {
     });
 
     it("propagates 404 error when file is not found", async () => {
-      vi.mocked(ragApiClient.post).mockRejectedValue(
-        new Error("File not found"),
-      );
+      vi.mocked(ragApiClient.post).mockRejectedValue(new Error("File not found"));
 
-      await expect(
-        ragFileContentApi.readFile("nonexistent/file.md"),
-      ).rejects.toThrow("File not found");
+      await expect(ragFileContentApi.readFile("nonexistent/file.md")).rejects.toThrow(
+        "File not found",
+      );
     });
 
     it("propagates generic axios rejection", async () => {
-      vi.mocked(ragApiClient.post).mockRejectedValue(
-        new Error("Network error"),
-      );
+      vi.mocked(ragApiClient.post).mockRejectedValue(new Error("Network error"));
 
-      await expect(
-        ragFileContentApi.readFile("any/file.txt"),
-      ).rejects.toThrow("Network error");
+      await expect(ragFileContentApi.readFile("any/file.txt")).rejects.toThrow("Network error");
     });
   });
-});
\ No newline at end of file
+});
diff --git a/tests/unit/infrastructure/api/rag/ragIndexApi.test.ts b/tests/unit/infrastructure/api/rag/ragIndexApi.test.ts
index c5f5764..167757f 100644
--- a/tests/unit/infrastructure/api/rag/ragIndexApi.test.ts
+++ b/tests/unit/infrastructure/api/rag/ragIndexApi.test.ts
@@ -64,18 +64,14 @@ describe("ragIndexApi", () => {
     });
 
     it("propagates error when axios rejects", async () => {
-      vi.mocked(ragApiClient.post).mockRejectedValue(
-        new Error("File not found on storage"),
-      );
+      vi.mocked(ragApiClient.post).mockRejectedValue(new Error("File not found on storage"));
 
       const request = {
         file_name: "missing.txt",
         working_dir: "/data/project",
       };
 
-      await expect(ragIndexApi.indexFile(request)).rejects.toThrow(
-        "File not found on storage",
-      );
+      await expect(ragIndexApi.indexFile(request)).rejects.toThrow("File not found on storage");
     });
   });
 
@@ -124,10 +120,7 @@ describe("ragIndexApi", () => {
 
       await ragIndexApi.indexFolder(request);
 
-      const calledBody = vi.mocked(ragApiClient.post).mock.calls[0][1] as Record<
-        string,
-        unknown
-      >;
+      const calledBody = vi.mocked(ragApiClient.post).mock.calls[0][1] as Record<string, unknown>;
       expect(calledBody).not.toHaveProperty("file_extensions");
     });
 
@@ -157,18 +150,14 @@ describe("ragIndexApi", () => {
     });
 
     it("propagates error when axios rejects", async () => {
-      vi.mocked(ragApiClient.post).mockRejectedValue(
-        new Error("Folder not accessible"),
-      );
+      vi.mocked(ragApiClient.post).mockRejectedValue(new Error("Folder not accessible"));
 
       const request = {
         working_dir: "/data/missing",
         recursive: true,
       };
 
-      await expect(ragIndexApi.indexFolder(request)).rejects.toThrow(
-        "Folder not accessible",
-      );
+      await expect(ragIndexApi.indexFolder(request)).rejects.toThrow("Folder not accessible");
     });
   });
 
@@ -191,15 +180,12 @@ describe("ragIndexApi", () => {
 
       const result = await ragIndexApi.indexFileClassical(request);
 
-      expect(ragApiClient.post).toHaveBeenCalledWith(
-        "/api/v1/classical/file/index",
-        {
-          file_name: "guide.md",
-          working_dir: "/data/my-project",
-          chunk_size: 512,
-          chunk_overlap: 50,
-        },
-      );
+      expect(ragApiClient.post).toHaveBeenCalledWith("/api/v1/classical/file/index", {
+        file_name: "guide.md",
+        working_dir: "/data/my-project",
+        chunk_size: 512,
+        chunk_overlap: 50,
+      });
       expect(result).toEqual({
         status: "success",
         message: "File indexed with classical method",
@@ -229,9 +215,7 @@ describe("ragIndexApi", () => {
     });
 
     it("propagates error when axios rejects", async () => {
-      vi.mocked(ragApiClient.post).mockRejectedValue(
-        new Error("Chunking failed"),
-      );
+      vi.mocked(ragApiClient.post).mockRejectedValue(new Error("Chunking failed"));
 
       const request = {
         file_name: "bad.txt",
@@ -240,9 +224,7 @@ describe("ragIndexApi", () => {
         chunk_overlap: 50,
       };
 
-      await expect(ragIndexApi.indexFileClassical(request)).rejects.toThrow(
-        "Chunking failed",
-      );
+      await expect(ragIndexApi.indexFileClassical(request)).rejects.toThrow("Chunking failed");
     });
   });
 
@@ -266,16 +248,13 @@ describe("ragIndexApi", () => {
 
       const result = await ragIndexApi.indexFolderClassical(request);
 
-      expect(ragApiClient.post).toHaveBeenCalledWith(
-        "/api/v1/classical/folder/index",
-        {
-          working_dir: "/data/my-project",
-          recursive: true,
-          file_extensions: [".md", ".txt"],
-          chunk_size: 1024,
-          chunk_overlap: 100,
-        },
-      );
+      expect(ragApiClient.post).toHaveBeenCalledWith("/api/v1/classical/folder/index", {
+        working_dir: "/data/my-project",
+        recursive: true,
+        file_extensions: [".md", ".txt"],
+        chunk_size: 1024,
+        chunk_overlap: 100,
+      });
       expect(result).toEqual({
         status: "success",
         message: "Folder indexed with classical method",
@@ -300,10 +279,7 @@ describe("ragIndexApi", () => {
 
       await ragIndexApi.indexFolderClassical(request);
 
-      const calledBody = vi.mocked(ragApiClient.post).mock.calls[0][1] as Record<
-        string,
-        unknown
-      >;
+      const calledBody = vi.mocked(ragApiClient.post).mock.calls[0][1] as Record<string, unknown>;
       expect(calledBody).not.toHaveProperty("file_extensions");
     });
 
@@ -357,9 +333,7 @@ describe("ragIndexApi", () => {
     });
 
     it("propagates error when axios rejects", async () => {
-      vi.mocked(ragApiClient.post).mockRejectedValue(
-        new Error("Folder read error"),
-      );
+      vi.mocked(ragApiClient.post).mockRejectedValue(new Error("Folder read error"));
 
       const request = {
         working_dir: "/data/missing",
@@ -368,9 +342,7 @@ describe("ragIndexApi", () => {
         chunk_overlap: 50,
       };
 
-      await expect(ragIndexApi.indexFolderClassical(request)).rejects.toThrow(
-        "Folder read error",
-      );
+      await expect(ragIndexApi.indexFolderClassical(request)).rejects.toThrow("Folder read error");
     });
   });
-});
\ No newline at end of file
+});
diff --git a/tests/unit/infrastructure/api/rag/ragQueryApi.test.ts b/tests/unit/infrastructure/api/rag/ragQueryApi.test.ts
index 188ad71..9662578 100644
--- a/tests/unit/infrastructure/api/rag/ragQueryApi.test.ts
+++ b/tests/unit/infrastructure/api/rag/ragQueryApi.test.ts
@@ -89,9 +89,7 @@ describe("ragQueryApi", () => {
     });
 
     it("propagates error when axios rejects", async () => {
-      vi.mocked(ragApiClient.post).mockRejectedValue(
-        new Error("Internal server error"),
-      );
+      vi.mocked(ragApiClient.post).mockRejectedValue(new Error("Internal server error"));
 
       const request = {
         working_dir: "/data/project",
@@ -100,9 +98,7 @@ describe("ragQueryApi", () => {
         top_k: 5,
       };
 
-      await expect(ragQueryApi.queryLightRAG(request)).rejects.toThrow(
-        "Internal server error",
-      );
+      await expect(ragQueryApi.queryLightRAG(request)).rejects.toThrow("Internal server error");
     });
 
     it("throws ZodError when response does not match schema", async () => {
@@ -158,18 +154,15 @@ describe("ragQueryApi", () => {
 
       const result = await ragQueryApi.queryClassical(request);
 
-      expect(ragApiClient.post).toHaveBeenCalledWith(
-        "/api/v1/classical/query",
-        {
-          working_dir: "/data/my-project",
-          query: "Explain vector search",
-          top_k: 8,
-          num_variations: 3,
-          relevance_threshold: 0.7,
-          enable_llm_judge: true,
-          mode: "hybrid",
-        },
-      );
+      expect(ragApiClient.post).toHaveBeenCalledWith("/api/v1/classical/query", {
+        working_dir: "/data/my-project",
+        query: "Explain vector search",
+        top_k: 8,
+        num_variations: 3,
+        relevance_threshold: 0.7,
+        enable_llm_judge: true,
+        mode: "hybrid",
+      });
       expect(result.status).toBe("success");
       expect(result.chunks).toHaveLength(1);
       expect(result.chunks[0].relevance_score).toBe(8.5);
@@ -232,10 +225,7 @@ describe("ragQueryApi", () => {
 
       await ragQueryApi.queryClassical(request);
 
-      const calledBody = vi.mocked(ragApiClient.post).mock.calls[0][1] as Record<
-        string,
-        unknown
-      >;
+      const calledBody = vi.mocked(ragApiClient.post).mock.calls[0][1] as Record<string, unknown>;
       expect(calledBody).not.toHaveProperty("vector_distance_threshold");
     });
 
@@ -279,9 +269,7 @@ describe("ragQueryApi", () => {
     });
 
     it("propagates error when axios rejects", async () => {
-      vi.mocked(ragApiClient.post).mockRejectedValue(
-        new Error("Service unavailable"),
-      );
+      vi.mocked(ragApiClient.post).mockRejectedValue(new Error("Service unavailable"));
 
       const request = {
         working_dir: "/data/project",
@@ -293,9 +281,7 @@ describe("ragQueryApi", () => {
         mode: "hybrid" as const,
       };
 
-      await expect(ragQueryApi.queryClassical(request)).rejects.toThrow(
-        "Service unavailable",
-      );
+      await expect(ragQueryApi.queryClassical(request)).rejects.toThrow("Service unavailable");
     });
 
     it("throws ZodError when response does not match schema", async () => {
diff --git a/tests/unit/infrastructure/axiosInstance.test.ts b/tests/unit/infrastructure/axiosInstance.test.ts
index 6de73f7..377c4bc 100644
--- a/tests/unit/infrastructure/axiosInstance.test.ts
+++ b/tests/unit/infrastructure/axiosInstance.test.ts
@@ -25,10 +25,9 @@ describe("axiosInstance", () => {
   it("apiClient fetches config and sets baseURL", async () => {
     const { apiClient } = await import("@/infrastructure/api/axiosInstance");
 
-    const requestConfig =
-      await apiClient.interceptors.request.handlers[0].fulfilled({
-        headers: {},
-      });
+    const requestConfig = await apiClient.interceptors.request.handlers[0].fulfilled({
+      headers: {},
+    });
 
     expect(requestConfig.baseURL).toBe("http://test-api:8010");
   });
diff --git a/tests/unit/infrastructure/config/fileConfigRepository.test.ts b/tests/unit/infrastructure/config/fileConfigRepository.test.ts
index e0777ce..d7d007b 100644
--- a/tests/unit/infrastructure/config/fileConfigRepository.test.ts
+++ b/tests/unit/infrastructure/config/fileConfigRepository.test.ts
@@ -79,9 +79,7 @@ describe("FileConfigRepository", () => {
       } as Response);
 
       const repo = new FileConfigRepository();
-      await expect(repo.getConfig()).rejects.toThrow(
-        "Failed to load config: 500",
-      );
+      await expect(repo.getConfig()).rejects.toThrow("Failed to load config: 500");
 
       expect(mockToast.error).toHaveBeenCalledWith("Configuration Error", {
         description: "App is not configured.",
diff --git a/tests/unit/pages/AgentsPage.test.tsx b/tests/unit/pages/AgentsPage.test.tsx
index 29f02e2..05cbe06 100644
--- a/tests/unit/pages/AgentsPage.test.tsx
+++ b/tests/unit/pages/AgentsPage.test.tsx
@@ -52,17 +52,13 @@ describe("AgentsPage", () => {
   it("renders Active Agents heading", () => {
     renderWithProviders(<AgentsPage />, { initialEntries: ["/agents"] });
 
-    expect(
-      screen.getByRole("heading", { name: /active agents/i }),
-    ).toBeInTheDocument();
+    expect(screen.getByRole("heading", { name: /active agents/i })).toBeInTheDocument();
   });
 
   it("renders Create Agent button", () => {
     renderWithProviders(<AgentsPage />, { initialEntries: ["/agents"] });
 
-    expect(
-      screen.getByRole("button", { name: /create agent/i }),
-    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /create agent/i })).toBeInTheDocument();
   });
 
   it("shows agent grid with agents", () => {
@@ -79,9 +75,7 @@ describe("AgentsPage", () => {
     await user.click(screen.getByRole("button", { name: /create agent/i }));
 
     // Dialog should have a title matching "Create Agent"
-    expect(
-      screen.getByRole("heading", { name: /create agent/i }),
-    ).toBeInTheDocument();
+    expect(screen.getByRole("heading", { name: /create agent/i })).toBeInTheDocument();
   });
 
   it("opens AgentConfigViewer when Configure button is clicked", async () => {
@@ -98,8 +92,6 @@ describe("AgentsPage", () => {
   it("renders description text", () => {
     renderWithProviders(<AgentsPage />, { initialEntries: ["/agents"] });
 
-    expect(
-      screen.getByText(/configure and manage your ai agent fleet/i),
-    ).toBeInTheDocument();
+    expect(screen.getByText(/configure and manage your ai agent fleet/i)).toBeInTheDocument();
   });
 });
diff --git a/tests/unit/pages/ChatPage.test.tsx b/tests/unit/pages/ChatPage.test.tsx
index 1e5a9d3..e56f4fc 100644
--- a/tests/unit/pages/ChatPage.test.tsx
+++ b/tests/unit/pages/ChatPage.test.tsx
@@ -57,12 +57,8 @@ describe("ChatPage", () => {
       { initialEntries: ["/chat"] },
     );
 
-    expect(
-      screen.getByRole("heading", { name: /orchestration console/i }),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByText(/select a thread from the sidebar/i),
-    ).toBeInTheDocument();
+    expect(screen.getByRole("heading", { name: /orchestration console/i })).toBeInTheDocument();
+    expect(screen.getByText(/select a thread from the sidebar/i)).toBeInTheDocument();
   });
 
   it("shows message list when threadId is provided", () => {
diff --git a/tests/unit/pages/RagPage.test.tsx b/tests/unit/pages/RagPage.test.tsx
index 46e25f6..2e670e6 100644
--- a/tests/unit/pages/RagPage.test.tsx
+++ b/tests/unit/pages/RagPage.test.tsx
@@ -71,9 +71,7 @@ describe("RagPage", () => {
   it("renders page title RAG Storage", () => {
     renderWithProviders(<RagPage />, { initialEntries: ["/rag"] });
 
-    expect(
-      screen.getByRole("heading", { name: /rag storage/i }),
-    ).toBeInTheDocument();
+    expect(screen.getByRole("heading", { name: /rag storage/i })).toBeInTheDocument();
   });
 
   it("shows breadcrumb navigation", () => {
@@ -112,9 +110,7 @@ describe("RagPage", () => {
 
     await user.click(screen.getByRole("tab", { name: /query/i }));
 
-    expect(
-      screen.getByRole("button", { name: /lightrag/i }),
-    ).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: /lightrag/i })).toBeInTheDocument();
   });
 
   it("WorkspaceSelector is visible on Query tab", async () => {
@@ -123,8 +119,6 @@ describe("RagPage", () => {
 
     await user.click(screen.getByRole("tab", { name: /query/i }));
 
-    expect(
-      screen.getByLabelText(/workspace|working.?dir/i),
-    ).toBeInTheDocument();
+    expect(screen.getByLabelText(/workspace|working.?dir/i)).toBeInTheDocument();
   });
 });

From 8a8308335dd4cd3237172991c0d5287204fb1f62 Mon Sep 17 00:00:00 2001
From: Kaiohz <yohan.goncalves@cosigma.io>
Date: Sat, 11 Jul 2026 10:44:36 +0200
Subject: [PATCH 3/3] Remove cache-to option from Docker build

---
 .github/workflows/cd.yaml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.github/workflows/cd.yaml b/.github/workflows/cd.yaml
index 9d0774b..626e38e 100644
--- a/.github/workflows/cd.yaml
+++ b/.github/workflows/cd.yaml
@@ -68,7 +68,6 @@ jobs:
           platforms: linux/amd64
           tags: kaiohz/pickpro:composable-ui-scan
           cache-from: type=gha
-          cache-to: type=gha,mode=max
 
       - name: Trivy Image Scan (report)
         uses: aquasecurity/trivy-action@57a97c7e7821a5776cebc9bb87c984fa69cba8f1