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/.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
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 12671ae..8c59090 100644
--- a/src/application/App.tsx
+++ b/src/application/App.tsx
@@ -1,7 +1,20 @@
+import { Suspense, lazy } from "react";
 import { Routes, Route, Navigate } from "react-router-dom";
-import AgentsPage from "@/application/pages/AgentsPage";
 import ChatPage from "@/application/pages/ChatPage";
-import RagPage from "@/application/pages/RagPage";
+
+// Lazy-load secondary routes for code-splitting / smaller initial bundle.
+const AgentsPage = lazy(() => import("@/application/pages/AgentsPage"));
+const RagPage = lazy(() => import("@/application/pages/RagPage"));
+
+function PageFallback() {
+  return (
+    <div className="flex-1 flex items-center justify-center" role="status" aria-live="polite">
+      <p className="text-on-surface-variant text-sm">Loading…</p>
+    </div>
+  );
+}
+
+export { PageFallback };
 
 function App() {
   return (
@@ -14,4 +27,10 @@ function App() {
   );
 }
 
-export default App;
+export default function AppRoot() {
+  return (
+    <Suspense fallback={<PageFallback />}>
+      <App />
+    </Suspense>
+  );
+}
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 bb24f65..21e4de4 100644
--- a/src/application/components/agent/AgentConfigForm.tsx
+++ b/src/application/components/agent/AgentConfigForm.tsx
@@ -26,26 +26,40 @@ 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";
 import HITLEditor from "./HITLEditor";
 import ResponseFormatEditor from "./ResponseFormatEditor";
+import { AGENT_CONFIG_FORM_ID as FORM_ID } from "./formConstants";
 
 // ─── 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" },
@@ -99,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,
@@ -121,15 +132,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 {
@@ -199,267 +213,239 @@ 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..."
-                />
-                <StringListEditor
-                  label="Skills"
-                  value={watch("skills")}
-                  onChange={(skills) => setValue("skills", skills)}
-                  placeholder="Add skill..."
+      <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}
                 />
-              </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 +454,18 @@ 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 +479,17 @@ 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>
       )}
@@ -505,14 +504,10 @@ 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">add</span>
+    <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>
   );
diff --git a/src/application/components/agent/AgentConfigViewer.tsx b/src/application/components/agent/AgentConfigViewer.tsx
index a26bd3e..d1f9f15 100644
--- a/src/application/components/agent/AgentConfigViewer.tsx
+++ b/src/application/components/agent/AgentConfigViewer.tsx
@@ -17,8 +17,8 @@ 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";
+import { AGENT_CONFIG_FORM_ID } from "./formConstants";
 
 interface AgentConfigViewerProps {
   readonly agentName: string;
@@ -31,11 +31,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 +108,228 @@ 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>
-            )}
+        {/* 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_ID}
+                  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>
+              )}
 
-            {error && (
-              <p className="text-destructive text-sm py-8 text-center">
-                Failed to load configuration: {error.message}
-              </p>
-            )}
+              {error && (
+                <p className="text-destructive text-sm py-8 text-center">
+                  Failed to load configuration: {error.message}
+                </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>
-
-                {/* 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}
-                          </span>
-                          <span className="text-on-surface-variant">
-                            {(() => {
-                              if (typeof value === "boolean")
-                                return value ? "Enabled" : "Disabled";
-                              return JSON.stringify(value);
-                            })()}
-                          </span>
-                        </div>
-                      ))}
-                    </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>
-                )}
 
-                {/* 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" && (
-            <>
-              <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
+                  {/* 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}>
+                <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}
-                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
+              <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>
+                <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,7 +337,7 @@ 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>
   );
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 35063c5..f376827 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,
@@ -18,23 +13,31 @@ 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;
   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 +57,7 @@ export default function CreateAgentDialog({
       {
         onSuccess: () => {
           toast.success("Agent created successfully");
-          onOpenChange(false);
+          handleClose();
         },
         onError: (error) => {
           toast.error(error.message);
@@ -63,7 +66,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 +82,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 +92,50 @@ 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_ID} 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 +144,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,29 +163,43 @@ 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_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"
+            >
+              {createAgent.isPending ? "Creating…" : "Create Agent"}
+            </button>
+          ) : (
+            <button
+              type="submit"
+              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"
+            >
+              {createAgent.isPending ? "Creating…" : "Create Agent"}
+            </button>
+          )}
+        </div>
       </DialogContent>
     </Dialog>
   );
diff --git a/src/application/components/agent/HITLEditor.tsx b/src/application/components/agent/HITLEditor.tsx
index 30f3d57..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>
@@ -99,17 +87,17 @@ 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>
       ))}
       {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 63e41a7..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,16 +78,16 @@ 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/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..7c7d481 100644
--- a/src/application/components/agent/McpServerEditor.tsx
+++ b/src/application/components/agent/McpServerEditor.tsx
@@ -45,7 +45,9 @@ 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>
 
@@ -63,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 />
@@ -86,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>
@@ -96,7 +94,7 @@ export default function McpServerEditor({
             label="Args"
             value={value.args}
             onChange={(args) => update({ args })}
-            placeholder="Add argument..."
+            placeholder="Add argument…"
           />
         </>
       )}
@@ -138,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 f535734..5fb1c58 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();
@@ -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,19 +63,17 @@ 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"
                 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..ac46238 100644
--- a/src/application/components/agent/SubAgentEditor.tsx
+++ b/src/application/components/agent/SubAgentEditor.tsx
@@ -36,7 +36,9 @@ 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>
 
@@ -84,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}
         />
@@ -98,14 +98,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/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 21615e8..a0993a3 100644
--- a/src/application/components/chat/ChatMessage.tsx
+++ b/src/application/components/chat/ChatMessage.tsx
@@ -1,11 +1,8 @@
+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";
@@ -19,17 +16,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({
-  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;
@@ -37,16 +30,16 @@ 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,16 +48,14 @@ 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}
-            </span>
+            <span className="font-headline font-bold text-sm text-on-surface">{agentName}</span>
             {message.status && <StatusBadge status={message.status} />}
           </div>
 
@@ -79,9 +70,7 @@ export default function ChatMessage({
                 "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} />
@@ -89,16 +78,13 @@ export default function ChatMessage({
           </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">
-            {formatTimestamp(message.timestamp)}
+            <time dateTime={message.timestamp}>{formatTimestamp(message.timestamp)}</time>
           </p>
-        </div>
+        </article>
       </div>
     );
   }
@@ -111,3 +97,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;
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 d8b1c33..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;
@@ -43,7 +39,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 +52,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">
@@ -66,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
@@ -99,33 +97,33 @@ 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>
             <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} />
                 <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,22 +132,21 @@ 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>
             <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-error-container/30 p-6 rounded-xl rounded-tl-none border border-error/20">
-                <p className="text-error text-sm font-medium">
-                  Something went wrong
-                </p>
-                <p className="text-error/80 text-xs mt-1">{error}</p>
+              <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/80 text-xs mt-1">{error}</p>
               </div>
             </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 3815188..be2b05a 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,10 +28,17 @@ 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>
   );
diff --git a/src/application/components/layout/ThreadSidebar.tsx b/src/application/components/layout/ThreadSidebar.tsx
index 95e9887..279e06f 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,17 +20,20 @@ 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);
 }
 
-export default function ThreadSidebar({
-  activeThreadId,
-}: Readonly<ThreadSidebarProps>) {
+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({ activeThreadId }: Readonly<ThreadSidebarProps>) {
   const { data: threads, isLoading } = useThreads();
   const { data: agents, isLoading: agentsLoading } = useAgents();
   const createThread = useCreateThread();
@@ -31,6 +41,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 +78,34 @@ 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 +113,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 +125,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 +163,41 @@ 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>
   );
 }
diff --git a/src/application/components/layout/TopNav.tsx b/src/application/components/layout/TopNav.tsx
index 1ed5827..908cc62 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,34 @@ 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 +49,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>
   );
 }
diff --git a/src/application/components/rag/BreadcrumbBar.tsx b/src/application/components/rag/BreadcrumbBar.tsx
index e7accea..f9640a9 100644
--- a/src/application/components/rag/BreadcrumbBar.tsx
+++ b/src/application/components/rag/BreadcrumbBar.tsx
@@ -3,51 +3,50 @@ 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"
+      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">
           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"
-            >
-              chevron_right
-            </span>
-            {isLast ? (
-              <span className="font-headline text-sm font-semibold text-on-surface">
-                {segment}
+      <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">
+              <span className="material-symbols-outlined text-xs text-outline" aria-hidden="true">
+                chevron_right
               </span>
-            ) : (
-              <button
-                type="button"
-                onClick={() => onNavigate(index)}
-                className="font-headline text-sm text-secondary-brand hover:opacity-80 transition-opacity"
-              >
-                {segment}
-              </button>
-            )}
-          </div>
-        );
-      })}
+              {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>
   );
 }
diff --git a/src/application/components/rag/FileContentPanel.tsx b/src/application/components/rag/FileContentPanel.tsx
index 93ed5d6..d64b1d4 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,91 @@ 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/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 b13498a..3088a19 100644
--- a/src/application/components/rag/IndexActionMenu.tsx
+++ b/src/application/components/rag/IndexActionMenu.tsx
@@ -1,56 +1,148 @@
-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>
   );
-}
\ No newline at end of file
+}
diff --git a/src/application/components/rag/PipelineToggle.tsx b/src/application/components/rag/PipelineToggle.tsx
index aef851a..2302065 100644
--- a/src/application/components/rag/PipelineToggle.tsx
+++ b/src/application/components/rag/PipelineToggle.tsx
@@ -1,35 +1,26 @@
+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;
 }
 
+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/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 aaf0b8e..4f2ec18 100644
--- a/src/application/components/rag/RagTabBar.tsx
+++ b/src/application/components/rag/RagTabBar.tsx
@@ -1,36 +1,23 @@
+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>) {
   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/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 5739498..88808fa 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,13 +15,25 @@ 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)) {
         setShowSuggestions(false);
@@ -28,45 +42,110 @@ export default function WorkspaceSelector({
 
     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>
@@ -76,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
new file mode 100644
index 0000000..0dddb11
--- /dev/null
+++ b/src/application/components/shared/SegmentedToggle.tsx
@@ -0,0 +1,76 @@
+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>
+  );
+}
diff --git a/src/application/components/shared/StatusBadge.tsx b/src/application/components/shared/StatusBadge.tsx
index 8dc0acf..c84f238 100644
--- a/src/application/components/shared/StatusBadge.tsx
+++ b/src/application/components/shared/StatusBadge.tsx
@@ -2,34 +2,68 @@ 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" };
+}
+
+/** 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 }: Readonly<StatusBadgeProps>) {
+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>
   );
 }
diff --git a/src/application/components/ui/accordion.tsx b/src/application/components/ui/accordion.tsx
index c10e6ed..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>,
@@ -12,11 +12,11 @@ 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}
   />
-))
-AccordionItem.displayName = "AccordionItem"
+));
+AccordionItem.displayName = "AccordionItem";
 
 const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
@@ -26,17 +26,20 @@ 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",
-        className
+        "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>
-))
-AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 
 const AccordionContent = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Content>,
@@ -47,10 +50,10 @@ 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>
-))
+));
 
-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 d9dd2de..7fde615 100644
--- a/src/application/components/ui/button.tsx
+++ b/src/application/components/ui/button.tsx
@@ -1,56 +1,49 @@
-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-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",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        default: "bg-primary-container text-white hover:opacity-90",
+        destructive: "bg-destructive text-white hover:opacity-90",
         outline:
-          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
-        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",
+          "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",
+        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: {
       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 22a0a83..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>,
@@ -19,13 +19,13 @@ 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",
-      className
+      "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}
   />
-))
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
@@ -36,48 +36,33 @@ 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",
-        className
+        "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>
   </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>,
@@ -86,13 +71,13 @@ const DialogTitle = React.forwardRef<
   <DialogPrimitive.Title
     ref={ref}
     className={cn(
-      "text-lg font-semibold leading-none tracking-tight",
-      className
+      "font-headline text-xl font-bold leading-tight text-on-surface tracking-tight pr-8",
+      className,
     )}
     {...props}
   />
-))
-DialogTitle.displayName = DialogPrimitive.Title.displayName
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
 
 const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
@@ -100,11 +85,11 @@ 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}
   />
-))
-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 96b642d..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-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",
-          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 722b2a7..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 { Check, 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>,
@@ -19,18 +19,18 @@ 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",
-      className
+      "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>
-))
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 
 const SelectScrollUpButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
@@ -39,15 +39,15 @@ const SelectScrollUpButton = React.forwardRef<
   <SelectPrimitive.ScrollUpButton
     ref={ref}
     className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
+      "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
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 
 const SelectScrollDownButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
@@ -56,16 +56,15 @@ const SelectScrollDownButton = React.forwardRef<
   <SelectPrimitive.ScrollDownButton
     ref={ref}
     className={cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
+      "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 =
-  SelectPrimitive.ScrollDownButton.displayName
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
 
 const SelectContent = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Content>,
@@ -75,10 +74,10 @@ 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",
-        className
+          "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}
       {...props}
@@ -86,9 +85,8 @@ const SelectContent = React.forwardRef<
       <SelectScrollUpButton />
       <SelectPrimitive.Viewport
         className={cn(
-          "p-1",
-          position === "popper" &&
-            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+          "p-1.5",
+          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>,
@@ -105,11 +103,14 @@ 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}
   />
-))
-SelectLabel.displayName = SelectPrimitive.Label.displayName
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
 
 const SelectItem = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Item>,
@@ -118,21 +119,22 @@ 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",
-      className
+      "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>
-))
-SelectItem.displayName = SelectPrimitive.Item.displayName
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
 
 const SelectSeparator = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Separator>,
@@ -140,11 +142,11 @@ 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}
   />
-))
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
 
 export {
   Select,
@@ -157,4 +159,4 @@ export {
   SelectSeparator,
   SelectScrollUpButton,
   SelectScrollDownButton,
-}
+};
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 0e15103..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-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",
-        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 5ba181d..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,25 +92,17 @@ 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();
+    expect(screen.getByText("Loading configuration…")).toBeInTheDocument();
   });
 
   it("renders model name from config", () => {
     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,16 +256,12 @@ 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()} />,
     );
 
-    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();
   });
@@ -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 0a11fa4..d6a99b6 100644
--- a/tests/unit/components/agent/CreateAgentDialog.test.tsx
+++ b/tests/unit/components/agent/CreateAgentDialog.test.tsx
@@ -47,26 +47,21 @@ describe("CreateAgentDialog", () => {
   });
 
   it("renders dialog title when open", () => {
-    renderWithProviders(
-      <CreateAgentDialog open={true} onOpenChange={vi.fn()} />,
-    );
+    renderWithProviders(<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", () => {
-    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();
   });
@@ -74,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"));
 
@@ -87,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 faf34f9..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,11 +37,9 @@ 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();
+    expect(screen.getByText("Awaiting Hitl")).toBeInTheDocument();
   });
 
   it("renders markdown content for AI messages", () => {
@@ -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 e33c59d..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 />);
@@ -144,7 +126,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 +136,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/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 83a7ebd..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("button", { name: /index with lightrag/i }),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByRole("button", { 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,14 +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("button", { name: /index with lightrag/i }));
+    await user.click(screen.getByRole("menuitem", { name: /index with lightrag/i }));
 
     expect(onIndexLightRAG).toHaveBeenCalledOnce();
   });
@@ -60,15 +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("button", { 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/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");
   });
 });
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();
   });
 });